JQuery Validate学习笔记
一、validate（）方法
rules里的常用验证规则：
1.required：输入字段是否为必须。
2.remote（调用形式，remote：“check.php”）：以Ajax形式调用验证方法进行验证。
3.email：输入字段是否为正确的电子邮件格式。
4.url：输入字段是否为正确的网址格式。
5.date：输入字段是否为正确日期格式。
6.dateISO：输入字段是否为”2014-11-12“格式，但不验证日期是否有效。
7.number：输入字段是否为合法数字。
8.digits：输入字段是否为整数。
9.creditcard：输入字段是否为合法信用卡号。
10.equalTo（调用格式，equalTo：选择器）：输入字段是否与选择器的字段相等。
11.accept：上传文件格式是否匹配，一般一后缀名作为判定标准。
12.maxlength（调用格式，maxlength:数字）：输入字段最大长度是否为特定长度，汉字记为一个字符串。
13.minlength（调用格式，minlength:数字）：输入字段最小长度是否为特定长度，汉字记为一个字符串。
14.rangelength（调用格式，rangelength:[数字1,数字2]）：输入字段长度是否介于数字1和数字2之间，数字1小于数字2。
15.range（调用格式，range:[数字1,数字2]）：输入值是否介于数字1和数字2之间，数字1小于数字2。
16.max（调用格式，max:数字1）：输入值是否小于数字1（最大为数字1）。
17.min（调用格式，min:数字1）：输入值是否大于数字1（最小为数字2）。
18.extension（调用格式，extension: "文件拓展名|文件拓展名"）：上传元素是否符合相应后缀名，默认为，extension: "png|?jpeg|gif"。
19.require_from_group（调用格式，require_from_group: [数字, 元素组群]）：验证一组元素是否添加够一定数量。
20.phoneUS：验证是否是一个合法的美国电话号码。
规则中冒号右边的true、false、数值等都可以换成拥有这样值的表达式或方法用来进行验证：
required:"#aa:checked" 表达式的值为真，则需要验证。
required:function(){} 返回为真，表示需要验证。
案例（remote验证）：
remote: "check-email.php"
案例（remote验证）：
remote: {
url: "check-email.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
}
}
}
案例（accept文件类型验证）：
$( "#myform" ).validate({
rules: {
field:{
required: true,
accept: "audio/*"
}
}
});
案例（extension文件后缀名验证）：
$( "#myform" ).validate({
rules: {
field: {
required: true,
extension: "xls|csv"
}
}
});
案例（require_from_group验证至少填写一个）：
<body>
<formid="myform">
<labelfor="mobile_phone">Mobile phone:label>
<inputclass="left phone-group"id="mobile_phone"name="mobile_phone">
<br/>
<labelfor="home_phone">Home phone:label>
<inputclass="left phone-group"id="home_phone"name="home_phone">
<br/>
<labelfor="work_phone">Work phone:label>
<inputclass="left phone-group"id="Work_phone"name="work_phone">
<br/>
<inputtype="submit"value="Validate!">
form>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js">script>
<scriptsrc="http://jqueryvalidation.org/files/dist/jquery.validate.min.js">script>
<scriptsrc="http://jqueryvalidation.org/files/dist/additional-methods.min.js">script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
mobile_phone: {
require_from_group: [1,".phone-group"]
},
home_phone: {
require_from_group: [1,".phone-group"]
},
work_phone: {
require_from_group: [1,".phone-group"]
}
}
});
script>
body>message规则：
相对于每一个rules的规则，都会有相应的message。默认的message：
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein gültiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
如果页面没有为规则编写特定的message，则会返回默认。
案例（validate的页面调用形式）：
$(document).ready(function() {
$("#signupForm").validate({ //要用JQuery的选择器来调用validate方法。
rules: { //编写过滤规则
firstname: "required", //1.可以直接用字符串“required”，表示此字段为必须。
email: {
required: true, //2.同样可以required:true，表示此字段为必须。
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: { //
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字 符")
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
}
});
});
案例（validate的js导入调用形式）：
首先导入js文件，然后调用validate的方法。
$().ready(function() {
$("#signupForm").validate();
});
submitHandler规则：
替换默认提交方式，进行自定义提交，加入提醒等。
案例（代替原本submit）：
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
});
案例（Ajax提交）：
$(".selector").validate({
submitHandler: function(form)
{
$(form).ajaxSubmit();
}
})
案例（为提交添加提醒）：
$.validator.setDefaults({
submitHandler: function(form) { alert("submitted!");form.submit(); }
});
invalidHandler规则：
无效表单被提交，回调方法。可以自定义回调信息。
案例（event为自定义事件对象，validator为表单验证器）：
$(".selector").validate({
invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors ==1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors +' fields. They have been highlighted';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
}
});
debug规则：
当值为true时，只检验数据有效性，不进行提交。
案例（表单验证）：
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
案例（全页面验证）：
$.validator.setDefaults({
debug: true
})
ignore规则，默认为”hidden“：
设定特定元素不需要验证。
案例：
ignore: ".ignore" //选择器内容不需要验证。
groups规则：
案例：
$("#myform").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") =="fname" || element.attr("name") =="lname" ) {
error.insertAfter("#lastname");
} else {
error.insertAfter(element);
}
}
});
errorPlacement规则：
指定验证信息显示的位置。默认的位置是在验证元素的后面。
案例：
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
errorClass规则：
指定验证错误后，提示信息的class属性，用以自定义提示信息的样式。默认为”error“。
案例：
$(".selector").validate({
errorClass:"invalid"
})
errorElement规则：
指定标记验证提示信息的标签，默认为”label‘，可以设为“em”。
案例：
$(".selector").validate
errorElement:"em"
})
errorContainer规则：
根据验证结果显示或者隐藏错误提示容器元素。
errorLabelContainer规则：
指定验证失败提示信息的存放容器。
案例：
$("#myform").validate({
errorLabelContainer:"#messageBox",
wrapper:"li",
submitHandler:function() {
alert("Submitted!")
}
})
wrapper规则：
指定元素将上面errorElement规则指定的信息存放标签包起来。
案例：
$(".selector").validate({
wrapper:"li"
})
success规则：
指定验证成功后的下一步操作。可以是函数，或者字符串（字符串被当做css类来处理）。
onsubmit规则：
默认为true，则在提交时验证，否则在另外的触发条件下验证。
案例：
$(".selector").validate({
onsubmit:false
})
onfocusout规则：
默认为true，则在失去焦点时验证，否则在另外的触发条件下验证。
案例：
$(".selector").validate({
onfocusout:false
})
onkeyup规则：
默认为true，则在按键按下时验证，否则在另外的触发条件下验证。
案例：
$(".selector").validate({
onkeyup:false
})
onclick规则：
默认为true，则在点击事件中验证，否则在另外的触发条件下验证。
案例：
$(".selector").validate({
onclick:false
})
focusInvalid规则：
默认为true，提交时验证未通过的第一个元素获得焦点。
案例：
$(".selector").validate({
focusInvalid:false
})
focusCleanup规则：
默认为false，在验证未通过元素获得焦点时，隐藏错误信息提示。避免和focusInvalid一起使用。
案例：
$(".selector").validate({
focusCleanup:true
})
showErrors规则：
跟一个函数，可以显示总共有多少个未通过验证的元素。
案例：
$(".selector").validate({
showErrors:function(errorMap,errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
this.defaultShowErrors();
}
})
highlight规则：
可以给未通过验证的元素加效果、闪烁等。
案例：
$(".selector").validate({
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element.form).find("label[for=" + element.id +"]")
.addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
$(element.form).find("label[for=" + element.id +"]")
.removeClass(errorClass);
}
});
unhighlight规则：
从高亮状态恢复平常，参数与highlight相同。
ignoreTitle规则：
忽略message的标题栏。默认为false。
案例：
$(".selector").validate({
ignoreTitle: true
});
addMethod规则（添加自定义验证）：
调用方式，addMethod：name, method, message。第一个参数为验证器名字，第二个为验证函数、第三个为验证返回信息。
案例：
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
案例：
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
二、rules组方法
.rules()：读取验证规则。
.rules("add",rules)：添加验证规则。
.rules("remove",rules)：移除验证规则，不指定rules，将移除所有规则。
案例（添加规则，最小长度为2）：
$( "#myinput" ).rules("add", {
minlength: 2
});
案例（添加规则，并自定义message）：
$( "#myinput" ).rules("add", {
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.format("Please, at least {0} characters are necessary")
}
});
案例（删除所有验证规则）：
$( "#myinput" ).rules( "remove" );
|
案例（删除指定验证规则，根据验证规则名指定）：
$( "#myinput" ).rules("remove","min max" );
rules规则指定形式：
1.验证规则如果没有参数，可以直接写在验证元素的class属性中。
2.带参数的验证规则，可以作为验证元素属性值来验证。
3.都以metadata形式调用。
4.都以validate的rules形式调用。
三、valid（）方法
验证元素中的所有需要验证子元素，是否合法有效。
案例：
<body>
<formid="myform">
<formid="myform">
<inputtype="text"name="name"required>
<br>
<buttontype="button">Validate!button>
form>
form>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js">script>
<scriptsrc="http://jqueryvalidation.org/files/dist/jquery.validate.min.js">script>
<scriptsrc="http://jqueryvalidation.org/files/dist/additional-methods.min.js">script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
var form = $("#myform" );
form.validate();
$( "button" ).click(function() {
alert( "Valid: " + form.valid() );
});
script>
body>
四、关于选择框的验证
redio、checkbox、select选择验证：
1.radio 的 required 表示必须选中一个。
案例（redio必须选一个）：
2.checkbox 的 required 表示必须选中。
案例（checkbox必须选中）：
3.checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。
案例（checkbox限定选定个数）：
4.select 的 required 表示选中的 value 不能为空。
案例（select选择不为空）：
5.select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。
案例（select多选限定）：
validate包含的选择验证
1、:unchecked Selector
选择所有未被选中的元素。
案例：
<body>
<formid="myform">
<form>
<inputtype="checkbox"name="newsletter"checked="checked"value="Hourly" />
<inputtype="checkbox"name="newsletter"value="Daily" />
<inputtype="checkbox"name="newsletter"value="Weekly" />
<inputtype="checkbox"name="newsletter"checked="checked"value="Monthly" />
<inputtype="checkbox"name="newsletter"value="Yearly" />
form>
<div>div>
form>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js">script>
<scriptsrc="http://jqueryvalidation.org/files/dist/jquery.validate.min.js">script>
<scriptsrc="http://jqueryvalidation.org/files/dist/additional-methods.min.js">script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
functioncountUnchecked() {
var n = $("input:unchecked" ).length;
$( "div" ).text(n + (n ==1 ?" is" :" are") +" unchecked!" );
}
countUnchecked();
$( ":checkbox" ).click( countUnchecked );
script>
body>
2、:filled Selector
选择所有被填充的元素。
案例：
<body>
<formid="myform">
<div>Mouseover to see the value of each inputdiv>
<inputvalue=""title='""'>
<inputvalue=" "title='" "'>
<inputvalue="abc"title='"abc"'>
form>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js">script>
<scriptsrc="http://jqueryvalidation.org/files/dist/jquery.validate.min.js">script>
<scriptsrc="http://jqueryvalidation.org/files/dist/additional-methods.min.js">script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "input:filled" ).css("background-color","#bbbbff" );
script>
body>
3、:blank Selector
选择空白的元素。
案例：
<body>
<formid="myform">
<div>Mouseover to see the value of each inputdiv>
<inputvalue=""title='""'>
<inputvalue=" "title='" "'>
<inputvalue="abc"title='"abc"'>
form>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js">script>
<scriptsrc="http://jqueryvalidation.org/files/dist/jquery.validate.min.js">script>
<scriptsrc="http://jqueryvalidation.org/files/dist/additional-methods.min.js">script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "input:blank" ).css("background-color","#bbbbff" );
script>
body>
五、validate方法会返回一个validator的对象，validator提供了一些方法供调用。
1.Validator.form()方法：验证form是否有效，有效返回true，否则为false。
案例：
var validator = $("#myform" ).validate();
validator.form();
2.Validator.element()方法：验证一个元素是否有效，有效返回true，否则为false。
案例：
var validator = $("#myform" ).validate();
validator.element( "#myselect" );
3.Validator.resetForm()方法：复位控制表单。
案例：
var validator = $("#myform" ).validate();
validator.resetForm();
4.Validator.showErrors()：自定义验证错误信息。
案例：
var validator = $("#myshowErrors" ).validate();
validator.showErrors({
"firstname":"I know that your firstname is Pete, Pete!"
});5.Validator.numberOfInvalids()： 返回无效元素的数目。
案例：
var validator = $( "#myform" ).validate({
invalidHandler: function() {
$( "#summary" ).text( validator.numberOfInvalids() + " field(s) are invalid" );
}
});
6.jQuery.validator.addMethod()：添加自定义的验证规则，调用模式，jQuery.validator.addMethod( name, method [, message ] )。
name，为规则的调用名，必须定义。message，为自定义默认验证信息。
method，验证具体实现，拥有三个参数：
1.value：验证元素的值。
2.element：需要验证的元素。
3.params：为method指定参数。
案例（验证给定值是否等于两参数之和）：
jQuery.validator.addMethod("math", function(value, element, params) {
return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));
7.jQuery.validator.format()：以定义形式替换占位符。调用形式，jQuery.validator.format( template, argument, argumentN… )。
template：定义模板。
argument：插入的第一个参数或字符串数组。
argumentN：插入的第n个参数等等。
案例（format中占位符由模板中“abc”来代替，然后结果为：“abc” is not a valid value。）：
var template = jQuery.validator.format("{0} is not a valid value");
// later, results in 'abc is not a valid value'
alert(template("abc"));
8.jQuery.validator.setDefaults()：为验证器设置默认值。
案例（将validation的debug设置默认为true）：
jQuery.validator.setDefaults({
debug: true
});
9.jQuery.validator.addClassRules()：定义规则的集合类。
案例（定义一个验证规则名字为“name”，包含rule原本的几条规则）：
required: true,
minlength: 2
});
name: {
required: true,
minlength: 2
},
zip: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
}
});