jquery表单插件中整合Ajax的验证
2018-05-26 21:53
330 查看
<%@ 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery ajax提交表单及表单验证+Jquery表单插件ajaxForm用法详解
- 整合struts2 jQuery validate 插件的远程Ajax验证
- 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
- jQuery用面向对象的思想来编写验证表单的插件
- jquery---------ajax+validate表单异步提交验证
- jquery+ajax验证不通过也提交表单问题处理
- jquery插件-表单验证插件-validator对象
- jquery 最简单易用的表单验证插件
- jQuery formValidator表单验证插件
- validationEngine中文版 — jquery强大的表单验证插件
- jQuery验证表单插件——jquery-validation
- jValidate 基于jQuery的表单验证插件
- KISSYUI的表单前端js验证和JQuery扩展插件Validate
- jQuery学习之：Validation表单验证插件
- 10款高质量的jQuery表单验证插件
- jquery （validate验证插件、form表单插件、cookie插件）
- Jquery表单提交插件之ajaxForm
- JS实现支持Ajax验证的表单插件