Question

7.1.1　Validation简介

最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件——Validation。Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。作为一个标准的验证方法库，Validation拥有如下特点。

　内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则。

　自定义验证规则：可以很方便地自定义验证规则。

　简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能。

　实时验证：可以通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证。

Jorn Zaefferer设计了Validation插件，并从2006年7月开始一直在对该插件进行改善和维护。

7.1.2　下载地址

jQuery Validation插件的下载地址：

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

在图7-2所示的界面中，不仅可以下载该插件，也可以查看所有历史版本的更新说明。在该页面还可以查看英文文档和演示例子等。

图7-2　 Validation插件页面截图

7.1.3　快速上手

先看一个简单的例子7-1-1，HTML和jQuery代码如下：

上面代码完成了以下验证。

（1）对姓名的必填和长度至少是两位的验证。

（2）对电子邮件的必填和是否为E-mail格式的验证。

（3）对网址是否为url的验证。

（4）对你的评论的必填验证。

当用户单击提交按钮后，显示图7-3所示的效果。

图7-3　快速上手例子

当用户在姓名对应的文本框中输入字符时，表单元素也会实时响应验证，产生图7-4所示的效果。

图7-4　字段实时验证

当用户输入字符时，表单元素就会实时响应验证信息，而不是只在用户单击提交按钮后才出现。这样做的好处是极大地方便了用户，促使用户填写出符合格式的数据。

从例子中可以看到，只需完成以下几步操作，就可以将一个普通的表单改造为可以进行Validation验证的表单。

（1）引入jQuery库和Validation插件。

（2）确定哪个表单需要被验证。

（3）针对不同的字段，进行验证规则编码，设置字段相应的属性。

　class="required"为必须填写，minlength="2"为最小长度为2。

　class="required　email"为必须填写和内容需要符合E-mail格式。

　class="url"为url格式验证。

7.1.4　不同的验证写法

在上节的例子中，开发者必须把required、url和email写到class属性里，才能完成必填验证、url验证和E-mail验证；把minlength属性的值设置为2，才能完成最小长度为2的验证。虽然class和minlength属性都符合W3C规范，但对于开发者来说，时而将与验证相关的信息写在class属性里面，时而又写在minlength属性里面实在很麻烦。Validation充分考虑到了这一点，读者可以将所有的与验证相关的信息写到class属性中方便管理。为了实现这个功能，需要经过以下几个步骤。

（1）引入一个新的jQuery插件——jquery.metadata.js。

注意：jquery.metadata.js是一个支持固定格式解析的jQuery插件，Validation插件将其很好地融合到验证规则编码中。通过下面的例子7-1-2，读者可以很容易地了解到需要掌握的格式，更加详细的metadata插件参见网址http://plugins.jquery.com/project/metadata。

（2）改变调用的验证方法。

将

改为

（3）将验证规则全部编写到class属性中，例7-1-2的HTML代码如下：

此时，本段代码的验证效果与前面的例子完全一致。

在上面两个例子中，验证规则都是通过设置一定的属性值来实现的，但验证行为和HTML结构并没有完全脱钩。下面介绍一种与HTML元素属性无直接关联，而是通过name属性来关联字段和验证规则的验证写法，这种方法可以实现行为与结构的分离。

首先，将字段中的class属性移除，此时的HTML代码并无其他多余的属性，例7-1-3的HTML代码如下：

然后加入如下jQuery代码：

运行代码后，验证效果与前面的例子也是完全一致的。本例中，具体编码步骤如下。

（1）在$("#commentForm").validate()方法中增加rules属性。

（2）通过每个字段的name属性值来匹配验证规则。

（3）定义验证规则：例如required: true, email: true, minlength: 2等。

7.1.5　验证信息

　国际化

Validation插件的验证信息默认语言为英文，如果要改成中文，只需要引入Validation提供的中文验证信息库即可，引入代码如下：

引入语言库后，显示图7-5所示的验证效果。

图7-5　中文提示信息

Validation插件也支持其他常用语言，读者可以自行引入相应的语言库进行配置。

　自定义验证信息

Validation插件可以很方便地自定义验证规则，用来代替千篇一律的默认验证信息，例如将例7-1-2中的字段提示信息的class值改成如下代码：

运行代码后，显示图7-6所示的效果。

图7-6　自定义验证信息

　自定义验证信息并美化

也许读者需要为验证提示信息加些漂亮的图片，这对于Validation插件来说，也是非常简单的事情。例如在例7-1-3中的jQuery代码中增加如下代码：

在CSS代码中增加如下代码，以便和errorElement相关联。

运行代码后，提示信息中就会包含错误提示图片，如图7-7所示效果。

图7-7　错误提示

7.1.6　自定义验证规则

衡量一个表单验证插件是否优秀的重要标准是看它是否有良好的自定义验证规则。由于需求的多种多样，除提供的默认验证规则外，还需要自定义验证规则，满足业务需要。

在很多网站中，表单中都包括验证码，通过自定义验证规则，可以轻易地完成验证码的验证。

首先在上面例子的基础上，添加验证验证码的HTML代码，代码如下：

为了实现验证验证码的功能，需要完成以下几个步骤。

（1）自定义一个验证规则。

jQuery代码：

（2）调用该验证规则。

jQuery代码中的rules中加入valcode: { formula: "7+9" }，其中"7+9"这个字符串可以通过其他手段获得，例如获取页面某个元素的text()或者通过Ajax来取得。这里为了简化就简单写成了"7+9"，如下面代码的加粗部分所示：

运行代码后，该页面的验证显示如图7-8所示。

图7-8　验证码验证

7.1.7　API

Validation插件的官方API地址为：

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

关于Validation插件的API内容，读者可以参考附录F。