jquery表单插件中整合Ajax的验证
岳时铭
<%@ 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>
<!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>
类似资料：