前段时间使用到了Jquery validate插件，在此做下总结。
主要使用到了普通验证和动态验证两种。
1.普通验证：
表单：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Insert title here</title>
</head>
<body>
<form id="inputForm" action="">
姓名：<input type="text" name="name" id="name"/><br>
年龄:<input type="text" name="age" id="age"/><br>
地址:<input type="text" name="address" id="address"/><br>
电话:<input type="text" name="phonenumber" id="phonenumber"/><br>
<input type="button" id="dd">
<input type="submit">
</form>
</body>
</html>js代码：
$(document).ready(function() {
$("#inputForm").validate({
rules: {
name: {
required: true,
rangelength: [1, 32]
},
age:{
required: true,
},
address: {
required: true,
rangelength: [1, 32]
},
phonenumber: {
required: true,
}
},
messages: {
name: {
required: "姓名不能为空"
},
age: {
required: "年龄不能为空"
},
address: {
required: "地址不能为空"
},
phonenumber: {
required: "电话不能为空"
},
},
});
})普通验证没有什么可说的，rules和messages对应表单的输入框的name属性，上述例子只验证必填和长度，若有其他需要建议查看官方文档，里面的属性比较齐全。在表单提交时会触发验证，验证通过才能提交成功，要注意的是引入的jauery.js和validate.js的版本。建议在官网下载，里面的demo中就有。
2.自定义验证：
自定义验证方法一般和validate方法配合使用
自定义方法return true则表示验证通过，return false则表示验证不通过，如下userName只表示一个名字，可以随便起，自定义验证方法中写你的验证规则。
jQuery.validator.addMethod("userName", function(value, element) {
return false;
}, "用户名必须在5-10个字符之间"); name: {
userName:true
required: true,
rangelength: [1, 3]
}
因此，也可以有下面这两种验证方式：
1.用element验证
如果验证的元素的值为‘123’则通过验证。
jQuery.validator.addMethod("userName", function(value, element) {
if($(element).val()=="123"){
return true;
}
else{
return false;
}
}, "姓名必须为123"); 判断name的值必须和age相等才能通过验证
jQuery.validator.addMethod("userName", function(value, element) {
if($(element).val()==$("#age").val()){
return true;
}
else{
return false;
}
}, "姓名和年龄必须相等");
2.用value同理
如果验证的元素的值为‘123’则通过验证。jQuery.validator.addMethod("userName", function(value, element) {
if(value=="123"){
return true;
}
else{
return false;
}
}, "用户名必须在5-10个字符之间");
可以用自定义方法，参数中的'niochinese'和元素的class相同，且name不能相同。下面这个方法验证所有class为nochinese的元素都不能输入中文。
jQuery.validator.addMethod("nochinese", function(value, element) {
return !(/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(value));
}, "不能包含中文");4.下面验证所有textarea
$("#inputForm").validate();
$("#res-type-text-content").find("textarea").each(function(){
$(this).rules( "add",{
required:true,
rangelength: [1, 128]
});
})
注意：验证动态输入框的时候输入框必须要有name属性，且name属性不能相同，否则只会验证第一个
5.取消验证信息
点击name为style的radio时候取消所有验证信息。
$("input[type='radio'][name='style']").click(function(){
$("#inputForm").validate().resetForm();
})