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 | 有值的筛选器。 | 
| :unchecked | Array | 没选择的元素的筛选器。 | 
| 实用工具 | ||
| jQuery.format(template,argument,argumentN...) | String | 用参数代替模板中的 {n}。 | 
1、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 | 增加组合验证类型,在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。 | 
2、内置验证方式
| 名称 | BooleanBoolean返回类型 | 描述 | 
|---|---|---|
| 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 | 验证美式的电话号码。 | 
3、validate ()的可选项
| 描述 | 代码 | 
|---|---|
| debug:进行调试模式(表单不提交)。 | 
 | 
| 把调试设置为默认。 | 
 | 
| submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。 | 
 | 
| ignore:对某些元素不进行验证。 | 
 | 
| rules:自定义规则,key:value 的形式,key 是要验证的元素,value 可以是字符串或对象。 | 
 | 
| messages:自定义的提示信息,key:value 的形式,key 是要验证的元素,value 可以是字符串或函数。 | 
 | 
| groups:对一组元素的验证,用一个错误提示,用 errorPlacement 控制把出错信息放在哪里。 | 
 | 
| OnSubmit:类型 Boolean,默认 true,指定是否提交时验证。 | 
 | 
| onfocusout:类型 Boolean,默认 true,指定是否在获取焦点时验证。 | 
 | 
| onkeyup:类型 Boolean,默认 true,指定是否在敲击键盘时验证。 | 
 | 
| onclick:类型 Boolean,默认 true,指定是否在鼠标点击时验证(一般验证 checkbox、radiobox)。 | 
 | 
| focusInvalid:类型 Boolean,默认 true。提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 | 
 | 
| focusCleanup:类型 Boolean,默认 false。当未通过验证的元素获得焦点时,移除错误提示(避免和 focusInvalid 一起使用)。 | 
 | 
| errorClass:类型 String,默认 "error"。指定错误提示的 css 类名,可以自定义错误提示的样式。 | 
 | 
| errorElement:类型 String,默认 "label"。指定使用什么标签标记错误。 | 
 | 
| wrapper:类型 String,指定使用什么标签再把上边的 errorELement 包起来。 | 
 | 
| errorLabelContainer:类型 Selector,把错误信息统一放在一个容器里面。 | 
 | 
| showErrors:跟一个函数,可以显示总共有多少个未通过验证的元素。 | 
 | 
| errorPlacement:跟一个函数,可以自定义错误放到哪里。 | 
 | 
| success:要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。 | 
 | 
| highlight:可以给未通过验证的元素加效果、闪烁等。 | 
4、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");
如果有个表单字段的 name="username",则在 rules 中写:
username:{
   af:["a","f"]
}
addMethod 的第一个参数,是添加的验证方法的名字,这时是 af。
addMethod 的第三个参数,是自定义的错误提示,这里的提示为:"必须是一个字母,且a-f"。
addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法。
如果只有一个参数,直接写,比如 af:"a",那么 a 就是这个唯一的参数,如果多个参数,则写在 [] 里,用逗号分开。
$("#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>
实例演示
• 错误消息容器
• 自定义消息作为元素数据
• radio(单选按钮)、checkbox(复选按钮)和 select(下拉框)
• 与表单(Form)插件的交互(AJAX 提交)
• 自定义方法和消息显示
• 动态表单
• 使用 jQuery UI Themeroller 定义表单样式
• TinyMCE - 一个轻量级的基于浏览器的所见即所得编辑器
• 文件输入框
• jQuery Mobile 表单验证
• Milk 注册表单
• Marketo 注册表单
• 房屋买卖折叠面板表单
• 远程 CAPTCHA(验证码)验证