JAvascript-フォーム検証
4952 ワード
Javascriptベースの簡単なフォーム検証プログラムで、一部の詳細は改善されていません.
html部分コード:
jsコードは主にjavascriptを使用して検証され、usernameプロパティはjqueryを使用してユーザー名が存在するかどうかをクエリーします.ここでは簡単なマッチングだけでなく、データベースクエリーを呼び出すこともできます.
html部分コード:
<form action="regeist" method="post" id="form1">
:<input type="text" name="username" id="username" onblur="checkname()">
<br/>
:<input type="password" name="password" id="password"><br/>
:<input type="password" name="repassword" id="repassword"><br/>
:<input type="text" name="email" id="email"><br/>
:<input type="text" name="mobile" id="mobile"><br/>
:<input type="text" name="birthday" id="birthday"><br/>
<input type="button" value="ok" onclick="mysubmit()">
<input type="reset" value="reset">
</form>
jsコードは主にjavascriptを使用して検証され、usernameプロパティはjqueryを使用してユーザー名が存在するかどうかをクエリーします.ここでは簡単なマッチングだけでなく、データベースクエリーを呼び出すこともできます.
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript">
function mysubmit(){
if(check()){
alert("mainok");
document.getElementById("form1").submit();
}
}
function check(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
var repassword=document.getElementById("repassword").value;
var email=document.getElementById("email").value;
var mobile=document.getElementById("mobile").value;
var birthday=document.getElementById("birthday").value;
if(username==null||username==""){
alert(" ");
document.getElementById("username").focus();
return false;
}
if(username.length<5){
alert(" 5-20 ");
document.getElementById("username").focus();
return false;
}
if(password==null||password==""){
alert(" ");
document.getElementById("password").focus();
return false;
}
if(password.length<6||password.length>20){
alert(" 6-20 ");
document.getElementById("password").focus();
return false;
}
if(password!=repassword){
alert(" ");
document.getElementById("password").focus();
return false;
}
if(email==null||email==""){
alert(" ");
document.getElementById("email").focus();
return false;
}
if(email.indexOf("@")==-1){
alert(" ");
document.getElementById("email").focus();
return false;
}
var str=/^1[3|4|5|8][0-9]\d{8}$/;
if(mobile!=null&&mobile!=""){
if(!str.test(mobile)){
alert(" ");
document.getElementById("mobile").focus();
return false;
}
}
return true;
}
function checkname(){
var username=document.getElementById("username").value;
$.ajax({
type:"post",
url:"checkname",
data:{
username:username
},
success:function(data){
//alert(data);
if(data=="true"){
document.getElementById("username").focus();
alert(" ");
return false;
}
}
})
}
</script>
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String username=request.getParameter("username");
System.out.println(username);
if(username.equals("zfy123")){
out.print("true");
}else{
out.print("false");
}
}