Jquery Ajax校验-优快云博客

本文链接：https://blog.youkuaiyun.com/qwertasdfg88774411/article/details/84245499

test.js

$(document).ready(function(){
 
 var flag1=false;
 $("#userid").blur(function checkUid(){
  var userid=$("#userid").val();
  if(userid==""){
   $("#uid").html("<font color='red' size='2'>用户名不能为空！</font>");
  }else if(userid.length<6||userid.length>15){
   $("#uid").html("<font color='red' size='2'>用户名必须在6到15位之间！</font>");
  }else if(userid.search("[^a-zA-Z0-9\]") != -1){
   $("#uid").html("<font color='red' size='2'>用户名含有非法字符！</font>");
  }else{
   var msg=$.ajax({
    type: "POST",
    url: "checkUserid?userid="+userid,
    beforeSend: function(){$("#uid").html("<font color='red' size='2'>loading......正在提交请稍候。</font>"); },
    success:function(){
     var text=msg.responseText;
     if("false"==text){
      $("#uid").html("<font color='green' size='2'>恭喜你，此用户名还可以注册！</font>");
      flag1=true;
     }else if("true"==text){
      $("#uid").html("<font color='red' size='2'>对不起，此用户名已经被使用！</font>");
     }
    }
    });
  }
  return flag1;
 });
 
 var flag2=false;
 $("#password").blur(function checkPwd(){
  var password=$("#password").val();
  if(password==""){
   $("#pwd").html("密码不能为空！");
  }else if(password.length<6||password.length>15){
   $("#pwd").html("密码必须在6到15位之间！");
  }else{
   $("#pwd").html("");
   flag2=true;
  }
  return flag2;
 });
 
 var flag3=false;
 $("#repassword").blur(function checkRePwd(){
  var password=$("#password").val();
  var repassword=$("#repassword").val();
  if(repassword==""){
   $("#repwd").html("密码不能为空！");
  }else if(repassword.length<6||repassword.length>15){
   $("#repwd").html("密码必须在6到15位之间！");
  }else if(repassword!=password){
   $("#repwd").html("两次输入的密码不一致，请重新输入！");
  }else{
   $("#repwd").html("");
   flag3=true;
  }
  return flag3;
 });
 
 var flag4=false;
 $("#name").blur(function checkNam(){
  var name=$("#name").val();
  if(name==""){
   $("#nam").html("姓名不能为空！");
  }else{
   $("#nam").html("");
   flag4=true;
  }
  return flag4;
 });
 
 $("#reigster").submit(function(){
  if(flag1&&flag2&&flag3&&flag4){
   return true;
  }else{
   $("#name").blur();
   $("#repassword").blur();
   $("#password").blur();
   $("#userid").blur();
   return false;
  }
 });
 
});

register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户注册</title>
    
    <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	
    <script type="text/javascript" src="js/jquery.js" charset="gb2312"></script>
    <script type="text/javascript" src="js/test.js" charset="gb2312"></script>
  </head>
  <body>
  
  <br/>
  <br/>
  
  	<form action="register" method="post" id="reigster">
  		<table>
  		<tr>
  			<td>用户名</td>
  			<td><input type="text" id="userid" name="userid"/></td>
  			<td><span id="uid"></span><font size="2" color="red">${errors.userid[0]}</font></td>
  		</tr>
  		
  		<tr>
  			<td>密码</td>
  			<td><input type="password" id="password" name="password"/></td>
  			<td><font size="2" color="red"><span id="pwd"></span>${errors.password[0]}</font></td>
  		</tr>
  		
  		<tr>
  			<td>确认密码</td>
  			<td><input type="password" id="repassword" name="repassword"/></td>
  			<td><font size="2" color="red"><span id="repwd"></span>${errors.repassword[0]}</font></td>
  		</tr>
  		
  		<tr>
  			<td>姓名</td>
  			<td><input type="text" id=name name="name"/></td>
  			<td><font size="2" color="red"><span id="nam"></span>${errors.name[0]}</font></td>
  		</tr>
  		
  		<tr>
  			<td>&nbsp;</td>
  			<td><input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="重置"/></td>
  		</tr>
  	</table>
  	</form>
  	
  <a href="index.jsp">点击登录</a>
  </body>
</html>