Jquery validate
jquery validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供大量的定制选项，满足应用程序的各种需求。该插件绑定了一套有用的验证方法，包括url和电子邮件验证，同时提供了一个用来用户编写用户自定义方法的API。
访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。
默认的校验规则
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required:true | 必须输入的字段 |
| 2 | remote:”check.php” | 使用ajax方法调用chek.php验证输入值 |
| 3 | email:true | 必须输入正确格式的电子邮件 |
| 4 | url:true | 必须输入正确格式的网址 |
| 5 | date:true | 必须输入正确格式的日期 |
| 6 | dateISO:true | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 |
| 7 | number:true | 必须输入合法的数字(负数、小数) |
| 8 | digits:true | 必须是整数 |
| 9 | creditcard | 必须输入的信用卡号 |
| 10 | equalTo:”#field” | 输入值必须和 #field 相同 |
| 11 | accept: | 输入拥有合法后缀名的字符串 |
| 12 | maxlength:5 | 输入最大的长度是5 |
| 13 | minlength:10 | 输入的最小长度是10 |
| 14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符） |
| 15 | range:[5,10] | 输入值必须介于5和10之间 |
| 16 | max:5 | 输入值不能大于5 |
| 17 | min:10 | 输入值不能小于10 |
默认提示
messages: {
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 ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
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}." )
}jquery validate提供了中文信息提示包，位于下载包的dist/localization/messages_zh.js，内容如下：
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
*/
$.extend($.validator.messages, { required: "这是必填字段", remote: "请修正此字段", email: "请输入有效的电子邮件地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入有效的日期 (YYYY-MM-DD)", number: "请输入有效的数字", digits: "只能输入数字", creditcard: "请输入有效的信用卡号码", equalTo: "你的输入不相同", extension: "请输入有效的后缀", maxlength: $.validator.format("最多可以输入 {0} 个字符"), minlength: $.validator.format("最少要输入 {0} 个字符"), rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"), range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"), max: $.validator.format("请输入不大于 {0} 的数值"), min: $.validator.format("请输入不小于 {0} 的数值") });
}));使用方法
将验证规则写到控件中
...
<script>
$.validator.setDefaults({
submitHandler : function(){
alert('提交事件');
}
});
$().ready(function(){
$('#commentForm').validate();
})
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>输入您的名字，邮箱，url,备注</legend>
<p>
<label for="cname">Name(必须，最少两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (可选)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">备注 (必需)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>将验证规则写到js代码中
$().ready(function(){
$('signupForm').validate({
rules:{
firstname : "required",
lastname : "required",
username : {
required : true,
minlength : 2
},
password : {
required : true,
minlength : 5
},
confirm_password : {
required : true,
minlength : 5,
equalTo : "#password"
},
eamil : {
required : true,
email : true
},
topic : {
required : "#newsletter:checked",
minlength : 2
},
agree : "required"
},
message : {
firstname : "请输入你的名字",
lastname : "请输入你的姓氏",
username : {
required : "请输入用户名",
minglength : "用户名必须由两个字母组成"
},
password : {
required : "请输入密码",
minglength : "密码长度不能小于5个字母"
},
confirm_password : {
required : "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
agree: "请接受我们的声明",
topic: "请选择两个主题"
}
});
});required : true只是必须的
required : "#aa:checked"表达式的值为真，则需要验证。
required : function(){}返回值为真表示需要验证
后两种常用于，表单中需要同时填或者不填的元素常用方法及注意问题
用其他方式替代默认的submit
$().ready(function(){
$('#signupForm').validate({
submitHandler : function(form){
alert('提交事件');
form.submit();
}
});
})使用ajax方式
$('.selector').validate({
submitHandler : function(){
$(form).ajaxSubmit();
}
});可以设置validate的默认值，写法如下：
$.validate.setDefaults({
submitHandler : function(form){form.submit()}
})debug，只验证不提交表单
如果这个参数为true,那么表单不会提交，只进行检查，调试时十分方便。
$().ready(function(){
$('#signupForm').validate({
debug:true
});
})如果一个页面有多个表单都想设置为debug，则使用：
$.validator.setDefaults({
debug:true
});ignore:忽略某些元素不验证
ignore: ".ignore"更改错误信息的提示位置
errorPlacrment : Callback指明错误放置位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。
errorPlacement : function(error,element){
error.appendTo(element.parent());
}$().ready(function(){
var validator = $("#signupform").validate({
errorPlacement : function(error,element){
$(element).closest("form").find("label[for='" + element.attr( "id" ) + "']" ).append( error );
},
});
...
});更改错误信息的显示样式
设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个validation.css，专门用于维护验证文件的样式。
input.error{border:1px solid red}
label.error{
background:url("../unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}每个字段验证通过执行函数
success:String,Callback要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个css类，也可以更一个函数。
success : function(label){
label.html("").addClass("checked");
}异步验证
remote : URL使用ajax方式进行验证，默认会提交当前验证值到远程地址，如果需要提交其他的值，可以使用data选项。
remote : {
url : "check-email.php" //后台处理程序
type : "post", //数据发送方式
dataType : "json", //数据接收格式
data : {
uername : function(){
return $("#username").val();
}
}
}远程地址只能输出”true”或”false”,不能有其他输出。
添加自动以校验
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));
}, "请正确填写您的邮政编码");radio和checkbox、select的验证
radio的required表示必须选中一个。
<input type="radion" id="gender_male" value="m" required />
<input type="radion" id="gender_female" value="f"/>checkbox的required表示必须选中
<input type="checkbox" class="checkbox" id="agree" name="agree" required />checkbox的minlength表示必须选中的最小个数，maxlength表示最大的选中个数，rangelenght:[2,3]表示选中个数的区间。
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />select 的 required 表示选中的 value 不能为空。
<select id="jungle" name="jungle" title="Please select something!" required>
<option value=""></option>
<option value="1">Buga</option>
<option value="2">Baga</option>
<option value="3">Oi</option>
</select>select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
<option value="b">Banana</option>
<option value="a">Apple</option>
<option value="p">Peach</option>
<option value="t">Turtle</option>
</select>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
