实例详解jQuery表单验证插件validate_jquery

例子，html代码

messages_cn.js文件如下

关于validator插件详解

主要分几部分

jquery.validate 基本用法
jquery.validate API说明
jquery.validate 自定义
jquery.validate 常见类型的验证代码

下载地址

jquery.validate插件的文档地址

http://docs.jquery.com/Plugins/Validation

jquery.validate插件的主页

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jquery.validate插件主页上提供的demo

http://jquery.bassistance.de/validate/demo/

验证规则

下面是默认校验规则，也可以自定义规则

(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.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

验证提示

下面是默认的验证提示，官网有简体中文版的验证提示下载，或者通过jQuery.extend(jQuery.validator.messages自定义错误提示信息，可以将网站的验证提示文本统一到一个文件里。

使用方式

1：

在控件中使用默认验证规则，例子：

电子邮件(必填)

2：

可以在控件中自定义验证规则，例子：

自定义(必填,[3,5])

3:

通过javascript自定义验证规则，下面的JS自定义了两个规则，password和confirm_password

required除了设置为true/false之外，还可以使用表达式或者函数，比如

Html

4：

使用meta自定义验证信息

首先用JS设置meta

Html

5:

使用meta可以将验证规则写在自定义的标签内，比如validate

JS设置meta

Html

Email

6:

自定义验证规则

对于复杂的验证，可以通过jQuery.validator.addMethod添加自定义的验证规则

官网提供的additional-methods.js里包含一些常用的验证方式，比如lettersonly，ziprange，nowhitespace等

例子

7:

radio、checkbox、select的验证方式类似

radio的验证

性别

checkbox的验证

最少选择两项

select的验证

下拉框

8:

Ajax验证

用remote可以进行Ajax验证

Plugin methods

Name Type

validate( options ) Returns: Validator

验证所选的FORM

valid( ) Returns: Boolean

检查是否验证通过

rules( ) Returns: Options

返回元素的验证规则

rules( "add", rules ) Returns: Options

增加验证规则

rules( "remove", rules ) Returns: Options

删除验证规则

removeAttrs( attributes ) Returns: Options

删除特殊属性并且返回他们

Custom selectors
Name Type

:blank Returns: Array
没有值的筛选器

:filled Returns: Array
有值的筛选器

:unchecked Returns: Array
没选择的元素的筛选器
Utilities

Name Type

jQuery.format( template, argument , argumentN... ) Returns: String
用参数代替模板中的 {n}。
Validator

validate方法返回一个Validator对象, 它有很多方法， 让你能使用引发校验程序或者改变form的内容.

下面只是列出常用的.

form( ) Returns: Boolean
验证form返回成功还是失败

element( element ) Returns: Boolean
验证单个元素是成功还是失败

resetForm( ) Returns: undefined
把前面验证的FORM恢复到验证前原来的状态

showErrors( errors ) Returns: undefined
显示特定的错误信息
built-in Validation methods

Name Type

setDefaults( defaults ) Returns: undefined
改变默认的设置

addMethod( name, method, message ) Returns: undefined
添加一个新的验证方法. 必须包括名字，一个JAVASCRIPT方法和一个默认的信息

addClassRules( name, rules ) Returns: undefined
增加组合验证类型

addClassRules( rules ) Returns: undefined
增加组合验证类型
built-in Validation methods

Name Type

required( ) Returns: Boolean
必填验证元素

required( dependency-expression ) Returns: Boolean
必填元素依赖于表达式的结果.

required( dependency-callback ) Returns: Boolean
必填元素依赖于回调函数的结果.

remote( url ) Returns: Boolean
请求远程校验。url通常是一个远程调用方法

minlength( length ) Returns: Boolean
设置最小长度

maxlength( length ) Returns: Boolean
设置最大长度

rangelength( range ) Returns: Boolean
设置一个长度范围[min,max]

min( value ) Returns: Boolean
设置最小值.

max( value ) Returns: Boolean
设置最大值.

range( range ) Returns: Boolean
设置值的范围

email( ) Returns: Boolean
验证电子邮箱格式

url( ) Returns: Boolean
验证连接格式

date( ) Returns: Boolean
验证日期格式(类似30/30/2008的格式，不验证日期准确性只验证格式)

dateISO( ) Returns: Boolean
研制ISO类型的日期格式

dateDE( ) Returns: Boolean
验证德式的日期格式（29.04.1994 or 1.1.2006）

number( ) Returns: Boolean
验证十进制数字（包括小数的）

numberDE( ) Returns: Boolean
Makes the element require a decimal number with german format.

digits( ) Returns: Boolean
验证整数

creditcard( ) Returns: Boolean
验证信用卡号

accept( extension ) Returns: Boolean
验证相同后缀名的字符串

equalTo( other ) Returns: Boolean
验证两个输入框的内容是否相同

自定义jquery-validate的验证行为

1: 自定义表单提交

设置submitHandler来自定义表单提交动作

如果需要提交表单，可以调用
form.submit(); 或者$(form).ajaxSubmit();

2: 调试模式

将debug设置为true，表单不会提交，只进行检查，方便调试

3: 设置validate的默认值

使用setDefaults可以设置validate的默认值，比如默认所有表单验证都是在debug模式下进行

4: 某些元素不验证

设置ignore属性可以忽略某些元素不验证

5: 验证时机

jquery.validate可以很方便的设置在什么时候触发验证动作

onsubmit: 提交时是否验证

onfocusout: 失去焦点时验证(checkboxes/radio除外)

onkeyup: 在keyup时验证

onclick: 在checkboxes、radio点击时验证.

6: 重写验证规则和验证提示信息

7: focusInvalid 是否把焦点聚焦在最后一个动作或者最近的一次出错上

8: focusCleanup

如果该属性设置为True, 那么控件获得焦点时，移除出错的class定义，隐藏错误信息，避免和 focusInvalid.一起用。

9: meta

设置meta来封装验证规则

自定义错误消息的显示方式

默认情况下，验证提示信息用label元素来显示, 并且会添加css class, 通过css可以很方便设置出错控件以及错误信息的显示方式。

如果想自定义显示方式，可以修改jquery.validate的默认显示方式

默认用label显示错误消息，可以通过errorElement属性来修改
errorElement: 错误消息的html标签

可以在出错信息外用其他的元素包装一层。
wrapper: 错误消息的外层封装html标签

验证出错的css class默认是error，通过errorClass可以修改
errorClass: 验证出错时使用的css class

还自定义验证成功时的动作
success: 如果值是字符串，会当做一个css类，如果是一个函数，则执行该函数

或者

还可以把错误消息统一到一个容器显示
errorLabelContainer: 将错误消息统一到一个容器显示

默认情况下，错误消息是放在验证元素后面的，可以自定义错误消息的显示位置

更进一步可以定义一个组，把几个地方的出错信息统一放在一个地方，用error Placement控制把出错信息放在哪里
groups：定义一个组

高亮显示

highlight: 高亮显示，默认是添加errorClass
unhighlight: 和highlight对应，反高亮显示

或者可以完全自定义错误显示
showErrors: 得到错误的显示句柄