jQuery Validate

jQuery Validate 插件为表单供给了强壮的验证功用,让客户端表单验证变得更简略,一同供给了许多的定制选项,满意应用程序各种需求。该插件绑缚了一套有用的验证办法,包含 URL 和电子邮件验证,一同供给了一个用来编写用户自界说办法的 API。一切的绑缚办法默许运用英语作为过错信息,且已翻译成其他 37 种言语。

该插件是由 Jörn Zaefferer 编写和保护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的首要开发人员,是 QUnit 的保护人员。该插件在 2006 年 jQuery 前期的时分就现已开端呈现,并一向更新至今。现在版本是 1.13.1。

拜访 ,下载最新版的 jQuery Validate 插件。

导入 js 库

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

默许校验规矩

序号 规矩 描绘
1 required:true 有必要输入的字段。
2 remote:"check.php" 运用 ajax 办法调用 check.php 验证输入值。
3 email:true 有必要输入正确格局的电子邮件。
4 url:true 有必要输入正确格局的网址。
5 date:true 有必要输入正确格局的日期。日期校验 ie6 犯错,慎用。
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).",
    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}.")
},

如需求修正,可在 js 代码中参加:

jQuery.extend(jQuery.validator.messages, {
    required: "必选字段",
	remote: "请修正该字段",
	email: "请输入正确格局的电子邮件",
	url: "请输入合法的网址",
	date: "请输入合法的日期",
	dateISO: "请输入合法的日期 (ISO).",
	number: "请输入合法的数字",
	digits: "只能输入整数",
	creditcard: "请输入合法的信誉卡号",
	equalTo: "请再次输入相同的值",
	accept: "请输入具有合法后缀名的字符串",
	maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
	minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
	rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
	range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
	max: jQuery.validator.format("请输入一个最大为{0} 的值"),
	min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

引荐做法,将此文件放入 messages_cn.js 中,在页面中引进:

<script src="../js/messages_cn.js" type="text/javascript"></script>

运用办法

1、将校验规矩写到控件中

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>

$().ready(function() {
 $("#signupForm").validate();
});


<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">承认暗码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

运用 class="{}" 的办法,有必要引进包:jquery.metadata.js。

能够运用如下的办法,修正提示内容:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在运用 equalTo 关键字时,后边的内容有必要加上引号,代码如下所示:

class="{required:true,minlength:5,equalTo:'#password'}"

2、将校验规矩写到 js 代码中

$().ready(function() {
 $("#signupForm").validate({
        rules: {
   firstname: "required",
   email: {
    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: "两次输入暗码不一致不一致"
   }
  }
    });
});

messages 处,假如某个控件没有 message,将调用默许的信息

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <label for="confirm_password">承认暗码</label>
  <input id="confirm_password" name="confirm_password" type="password" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

required:true 有必要有值。
required:"#aa:checked" 表达式的值为真,则需求验证。
required:function(){} 回来为真,表明需求验证。

后边两种常用于,表单中需求一同填或不填的元素。

常用办法及留意问题

1、用其他办法替代默许的 SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
});

运用 ajax 办法

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 

能够设置 validate 的默许值,写法如下:

 $.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

假如想提交表单, 需求运用 form.submit(),而不要运用 $(form).submit()。

2、debug,只验证不提交表单

假如这个参数为true,那么表单不会提交,只进行查看,调试时非常便利。

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

假如一个页面中有多个表单都想设置成为 debug,则运用:

$.validator.setDefaults({
   debug: true
})

3、ignore:疏忽某些元素不验证

ignore: ".ignore"

4、更改过错信息显现的方位

errorPlacement:Callback

指明过错放置的方位,默许状况是:error.appendTo(element.parent());即把过错信息放在验证的元素后边。

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

实例

<tr>
    <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
    <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
    <td class="status"></td>
</tr>
<tr>
    <td style="padding-right: 5px;">
        <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
        <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
    </td>
    <td style="padding-left: 5px;">
        <input id="dateformat_am" name="dateformat" type="radio" value="1"  />
        <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
    </td>
    <td></td>
</tr>
<tr>
    <td class="label">&nbsp;</td>
    <td class="field" colspan="2">
        <div id="termswrap">
            <input id="terms" type="checkbox" name="terms" />
            <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
        </div>
    </td>
</tr>

errorPlacement: function(error, element) {
    if ( element.is(":radio") )
        error.appendTo( element.parent().next().next() );
    else if ( element.is(":checkbox") )
        error.appendTo ( element.next() );
    else
        error.appendTo( element.parent().next() );
}

代码的作用是:一般状况下把过错信息显现在 <td class="status"></td> 中,假如是 radio 则显现在 <td></td> 中,假如是 checkbox 则显现在内容的后边。

参数 类型 描绘 默许值
errorClass String 指定过错提示的 css 类名,能够自界说过错提示的款式。 "error"
errorElement String 用什么标签符号过错,默许是 label,能够改成 em。 "label"
errorContainer Selector 显现或许躲藏验证信息,能够主动完成有过错信息呈现时把容器特点变为显现,无过错时躲藏,用途不大。
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer Selector 把过错信息一致放在一个容器里边。
wrapper String 用什么标签再把上边的 errorELement 包起来。

一般这三个特点一同运用,完成在一个容器内显现一切过错提示的功用,而且没有信息时主动躲藏。

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5、更改过错信息显现的款式

设置过错提示的款式,能够增加图标显现,在该体系中现已建立了一个 validation.css,专门用于保护校验文件的款式。

input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/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;
}

6、每个字段验证经过履行函数

success:String,Callback

要验证的元素经过验证后的动作,假如跟一个字符串,会当作一个 css 类,也可跟一个函数。

success: function(label) {
    // set &nbsp; as text for IE
    label.html("&nbsp;").addClass("checked");
    //label.addClass("valid").text("Ok!")
}

增加 "valid" 到验证元素,在 CSS 中界说的款式 <style>label.valid {}</style>。

success: "valid"

7、验证的触发办法修正

下面的虽然是 boolean 型的,但主张除非要改为 false,不然别乱增加。

触发办法 类型 描绘 默许值
onsubmit Boolean 提交时验证。设置为 false 就用其他办法去验证。 true
onfocusout Boolean 失掉焦点时验证(不包含复选框/单选按钮)。 true
onkeyup Boolean 在 keyup 时验证。 true
onclick Boolean 在点击复选框和单选按钮时验证。 true
focusInvalid Boolean 提交表单后,未经过验证的表单(第一个或提交之前取得焦点的未经过验证的表单)会取得焦点。 true
focusCleanup Boolean 假如是 true 那么当未经过验证的元素取得焦点时,移除过错提示。防止和 focusInvalid 一重用。 false
// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
    $("#reset").click(function() {
        validator.resetForm();
    });

});

8、异步验证

remote:URL

运用 ajax 办法进行验证,默许会提交当时验证的值到长途地址,假如需求提交其他的值,能够运用 data 选项。

remote: "check-email.php"
remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送办法
    dataType: "json",           //承受数据格局   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

长途地址只能输出 "true" 或 "false",不能有其他输出。

9、增加自界说校验

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));
}, "请正确填写您的邮政编码");

留意:要在 additional-methods.js 文件中增加或许在 jquery.validate.js 文件中增加。主张一般写在 additional-methods.js 文件中。

留意:在 messages_cn.js 文件中增加:isZipCode: "只能包含中文字、英文字母、数字和下划线"。调用前要增加对 additional-methods.js 文件的引证。

10、radio 和 checkbox、select 的验证

radio 的 required 表明有必要选中一个。

<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox 的 required 表明有必要选中。

<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox 的 minlength 表明有必要选中的最小个数,maxlength 表明最大的选中个数,rangelength:[2,3] 表明选中个数区间。

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, 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!" class="{required:true}">
    <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>

jQuery.validate 中文 API

称号 回来类型 描绘
validate(options) Validator 验证所选的 FORM。
valid() Boolean 查看是否验证经过。
rules() Options 回来元素的验证规矩。
rules("add",rules) Options 增加验证规矩。
rules("remove",rules) Options 删去验证规矩。
removeAttrs(attributes) Options 删去特别特点而且回来它们。
自界说挑选器
:blank Validator 没有值的挑选器。
:filled Array <Element> 有值的挑选器。
:unchecked Array <Element> 没挑选的元素的挑选器。
实用东西
jQuery.format(template,argument,argumentN...) String 用参数替代模板中的 {n}。

Validator

validate 办法回来一个 Validator 目标。Validator 目标有许多办法能够用来引发校验程序或许改动 form 的内容,下面列出几个常用的办法。

称号 回来类型 描绘
form() Boolean 验证 form 回来成功仍是失利。
element(element) Boolean 验证单个元素是成功仍是失利。
resetForm() undefined 把前面验证的 FORM 康复到验证前本来的状况。
showErrors(errors) undefined 显现特定的过错信息。
Validator 函数
setDefaults(defaults) undefined 改动默许的设置。
addMethod(name,method,message) undefined 增加一个新的验证办法。有必要包含一个绝无仅有的姓名,一个 JAVASCRIPT 的办法和一个默许的信息。
addClassRules(name,rules) undefined 增加组合验证类型,在一个类里边用多种验证办法时比较有用。
addClassRules(rules) undefined 增加组合验证类型,在一个类里边用多种验证办法时比较有用。这个是一同加多个验证办法。

内置验证办法

称号 回来类型 描绘
required() Boolean 必填验证元素。
required(dependency-expression) Boolean 必填元素依赖于表达式的成果。
required(dependency-callback) Boolean 必填元素依赖于回调函数的成果。
remote(url) Boolean 恳求长途校验。url 通常是一个长途调用办法。
minlength(length) Boolean 设置最小长度。
maxlength(length) Boolean 设置最大长度。
rangelength(range) Boolean 设置一个长度规模 [min,max]。
min(value) Boolean 设置最小值。
max(value) Boolean 设置最大值。
email() Boolean 验证电子邮箱格局。
range(range) Boolean 设置值的规模。
url() Boolean 验证 URL 格局。
date() Boolean 验证日期格局(相似 30/30/2008 的格局,不验证日期准确性只验证格局)。
dateISO() Boolean 验证 ISO 类型的日期格局。
dateDE() Boolean 验证德式的日期格局(29.04.1994 或 1.1.2006)。
number() Boolean 验证十进制数字(包含小数的)。
digits() Boolean 验证整数。
creditcard() Boolean 验证信誉卡号。
accept(extension) Boolean 验证相同后缀名的字符串。
equalTo(other) Boolean 验证两个输入框的内容是否相同。
phoneUS() Boolean 验证美式的电话号码。

validate ()的可选项

描绘 代码
debug:进行调试办法(表单不提交)。
$(".selector").validate
({
	debug:true
})
把调试设置为默许。
$.validator.setDefaults({
	debug:true
})
submitHandler:经过验证后运转的函数,里边要加上表单提交的函数,不然表单不会提交。
$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();
	}
})
ignore:对某些元素不进行验证。
$("#myform").validate({
	ignore:".ignore"
})
rules:自界说规矩,key:value 的办法,key 是要验证的元素,value 能够是字符串或目标。
$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})
messages:自界说的提示信息,key:value 的办法,key 是要验证的元素,value 能够是字符串或函数。
$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能为空",
		email:{       
			required:"E-mail不能为空",
			email:"E-mail地址不正确"
		}
	}
})
groups:对一组元素的验证,用一个过错提示,用 errorPlacement 操控把犯错信息放在哪里。
$("#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);
	},
   debug:true
})
Onubmit:类型 Boolean,默许 true,指定是否提交时验证。
$(".selector").validate({  
	onsubmit:false
})
onfocusout:类型 Boolean,默许 true,指定是否在获取焦点时验证。
$(".selector").validate({   
	onfocusout:false
})
onkeyup:类型 Boolean,默许 true,指定是否在敲击键盘时验证。
$(".selector").validate({
   onkeyup:false
})
onclick:类型 Boolean,默许 true,指定是否在鼠标点击时验证(一般验证 checkbox、radiobox)。
$(".selector").validate({
   onclick:false
})
focusInvalid:类型 Boolean,默许 true。提交表单后,未经过验证的表单(第一个或提交之前取得焦点的未经过验证的表单)会取得焦点。
$(".selector").validate({
   focusInvalid:false
})
focusCleanup:类型 Boolean,默许 false。当未经过验证的元素取得焦点时,移除过错提示(防止和 focusInvalid 一同运用)。
$(".selector").validate({
   focusCleanup:true
})
errorClass:类型 String,默许 "error"。指定过错提示的 css 类名,能够自界说过错提示的款式。
$(".selector").validate({ 
	errorClass:"invalid"
})
errorElement:类型 String,默许 "label"。指定运用什么标签符号过错。
$(".selector").validate
   errorElement:"em"
})
wrapper:类型 String,指定运用什么标签再把上边的 errorELement 包起来。
$(".selector").validate({
   wrapper:"li"
})
errorLabelContainer:类型 Selector,把过错信息一致放在一个容器里边。
$("#myform").validate({   
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() { 
		alert("Submitted!") 
	}
})
showErrors:跟一个函数,能够显现总共有多少个未经过验证的元素。
$(".selector").validate({  
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})
errorPlacement:跟一个函数,能够自界说过错放到哪里。
$("#myform").validate({  
	errorPlacement:function(error,element) {  
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})
success:要验证的元素经过验证后的动作,假如跟一个字符串,会当作一个 css 类,也可跟一个函数。
$("#myform").validate({        
	success:"valid",
        submitHandler:function() { 
			alert("Submitted!") 
		}
})
highlight:能够给未经过验证的元素加作用、闪耀等。

addMethod(name,method,message)办法

参数 name 是增加的办法的姓名。

参数 method 是一个函数,接纳三个参数 (value,element,param) 。
value 是元素的值,element 是元素自身,param 是参数。

咱们能够用 addMethod 来增加除内置的 Validation 办法之外的验证办法。比方有一个字段,只能输一个字母,规模是 a-f,写法如下:

$.validator.addMethod("af",function(value,element,params){  
	if(value.length>1){
		return false;
	}
    if(value>=params[0] && value<=params[1]){
		return true;
	}else{
		return false;
	}
},"有必要是一个字母,且a-f");

假如有个表单字段的 id="username",则在 rules 中写:

username:{
   af:["a","f"]
}

addMethod 的第一个参数,是增加的验证办法的姓名,这时是 af。
addMethod 的第三个参数,是自界说的过错提示,这儿的提示为:"有必要是一个字母,且a-f"。
addMethod 的第二个参数,是一个函数,这个比较重要,决议了用这个验证办法时的写法。

假如只要一个参数,直接写,比方 af:"a",那么 a 便是这个仅有的参数,假如多个参数,则写在 [] 里,用逗号分隔。

meta String 办法

$("#myform").validate({

   meta:"validate",

   submitHandler:function() { 
alert("Submitted!") }

})
<script type="text/javascript" 
src="js/jquery.metadata.js"></script>

<script type="text/javascript" 
src="js/jquery.validate.js"></script>

<form id="myform">

  <input type="text" 
name="email" class="{validate:{ required:true,email:true }}" />

  <input type="submit" 
value="Submit" />

</form>

实例演示

虚拟的实例

实际国际的实例

实例下载