jquery表单插件中整合Ajax的验证

岳时铭
2023-12-01
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery简单的注册表单验证代码</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/easyform.js"></script>
<script type="text/javascript">
  function checkUserName(){
   var val = $(":input[name=userName]").val();
   val = $.trim(val);
   
   if(val != ""){
    var url = "user-validateUserName";
    var args = {"userName":val,"time":new Date()};
    $.post(url,args,function(s){
     $(":input[name=userName]").trigger("easyinput-ajax", s=="1");
    });
   }
  }
 </script>
</head>
<body>
<br>
<div class="form-div">
 <h1>飞鱼用户注册</h1>
    <form id="reg-form" action="user-register" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td><input name="userName" type="text" id="userName" easyform="length:1-16;char-chinese;real-time;ajax:checkUserName();" message="用户名不能为空" easytip="disappear:lost-focus;theme:blue;" ajax-message="用户名已存在!" />
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input name="userPassword" type="password" id="psw1" easyform="length:6-16;" message="密码必须为6—16位" easytip="disappear:lost-focus;theme:blue;" /></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input name="reuserPassword" type="password" id="psw2" easyform="length:6-16;equal:#psw1;" message="两次密码输入要一致" easytip="disappear:lost-focus;theme:blue;" /></td>
            </tr>
            <tr>
                <td>手机号</td>
                <td><input name="userPhonenumber" type="text" id="userPhonenumber" easyform="uint:1;real-time;" message="手机号格式要正确" easytip="disappear:lost-focus;theme:blue;" ajax-message="这个手机号已经被注册过,请换一个吧!" /></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input name="userAddress" type="text" id="address" easyform="char-chinese;length:0-16;" message="地址不能为空" easytip="disappear:lost-focus;theme:blue;" /></td>
            </tr>           
        </table>
  <div class="buttons">
   <input value="注 册" type="submit" style="margin-right:20px; margin-top:20px;" />
   <input value="我有账号,我要登录" type="button" style="margin-right:45px; margin-top:20px;" />
        </div>
        <br class="clear"></br>
    </form>
</div>
<script type="text/javascript">
$(document).ready(function(){
 $('#reg-form').easyform();
});
</script>
</body>
</html>
 类似资料: