表单验证的插件 jqueryValidator

默认校验规则
序号	规则	描述
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。 

引入.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 src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<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"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
    }
});

messages 处，如果某个控件没有 message，将调用默认的信息
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="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>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

required: true 值是必须的。

required: "#aa:checked" 表达式的值为真，则需要验证。

required: function(){} 返回为真，表示需要验证。

后边两种常用于，表单中需要同时填或不填的元素。



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
})
OnSubmit：类型 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>