jquery验证插件中的一种jquery.validate、jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。
1.jquery.validate插件功能
简单实现客户端信息验证,过滤不符合要求的信息
2.jquery.validate官方地址
官方地址:http://jqueryvalidation.org/,有详细的插件使用说明
官方demo:http://jquery.bassistance.de/validate/demo/
3.jquery.validate使用方法
主要验证方法有:required 必填、remote远程校验、minlength最小长度、maxlength最大长度、rangelenght长度范围、min最小值、max最大值、range值范围、email Email格式、url URL格式、date日期、dateISO ISO日期、number数字、digits整数、equalTo与另一个元素相等
简单验证:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body {
font-family: sans-serif;
}
label {
display: block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 12px;
}
input[type="text"], input[type="password"], input[type="submit"], input[type="radio"],
input[type="checkbox"], select, textarea {
margin-bottom: 5px;
padding: 5px;
border-radius: 3px;
border: 1px solid #999;
}
div.validate-error {
color: #f00;
font-size: 12px;
font-weight: bold;
}
label.error {
color: #f00;
}
input.error, select.error, textarea.error {
border: 1px solid red;
background-color: #fff6f6;
}
form {
float: left;
margin-right: 40px;
margin-bottom: 40px;
}
</style>
<script type="text/javascript" src="jq/jquery-1.11.1.js"></script>
<script type="text/javascript" src="jq/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
debug = true;
$("#userform").validate({
rules : {
username : {
required : true,
minlength : 2,
maxlength : 10,
remote : "user.jsp"//验证用户是否存在
},
password : {
required : true,
minlength : 6,
maxlength : 20
},
validatepass : {
equalTo : "#password"
},
phone : {
number : true,
rangelength : [ 6, 11 ]
},
email : {
email : true
},
birthday : {
date : true
}
},
messages : {
username : {
required : "用户名不能为空",
minlength : "用户名至少两个字符",
maxlength : "用户名最多为10个字符",
remote : "用户已存在"
},
password : {
required : "密码不能为空",
minlength : "密码至少6个字符",
maxlength : "密码最多为20个字符"
},
validatepass : {
equalTo : "两次输入密码不一致"
},
phone : {
number : "请输入数字",
rangelength : "请输入正确的手机号码"
},
email : {
email : "请输入正确的邮箱地址"
},
birthday : {
date : "请输入正确的日期格式,如2008-8-8 8:8:8"
}
},
submitHandler : function(form) { //通过之后回调
var param = $("#userform").serialize();
$.ajax({
url : "user/regist",
type : "post",
data : param,
success : function(result) {
layer.msg('注册中.....', {
icon : 16
});
setTimeout(function() {
layer.closeAll('loading');
parent.layer.msg('注册成功.....', {
icon : 1
});
//刷新表单
var url = "user/findAllUser";
$("#usertable").jqGrid("setGridParam", {
url : url,
pageNum : 1,
type : "post",
datatype : "json"
}).trigger("reloadGrid");
}, 800);
}
});
},
invalidHandler : function(form, validator) { //不通过回调
return false;
}
});
});
</script>
</head>
<body>
<form action="#" id="userform">
<fieldset>
<legend>用户注册</legend>
<p>
<label>用户名:</label> <input type="text" id="username" name="username">
</p>
<p>
<label>密码:</label> <input type="password" id="password"
name="password">
</p>
<p>
<label>密码验证:</label> <input type="password" id="validatepass"
name="validatepass"><br>
</p>
<p>
<label>手机号码:</label> <input type="text" id="phone" name="phone"><br>
</p>
<p>
<label>邮箱:</label> <input type="text" id="email" name="email"><br>
</p>
<p>
<label>出生日期:</label> <input type="text" id="birthday"
name="birthday"><br>
</p>
<p>
<input type="submit" value="登录">
</p>
</fieldset>
</form>
</body>
</html>