9.5　验证教程

在本教程中，我们将使用一个表单并为其添加基本验证和高级验证选项（如图9-7所示）。

注意：参见本书1.3节中的“注意”部分以获取有关如何下载教程文件的信息。

9.5.1　基本验证

在本教程中，我们将从介绍Validation插件开始，首先应用9.4.2节所介绍的基本验证方法。然后，我们将学习更为复杂的验证过程，这将使用9.4.3节介绍的高级方法。你将会看到，在同一表单上混合和匹配这两种方法完全没有问题。

图　9-7　不要让访问者不正确地提交表单。在jQuery Validation插件的协助下，我们可以确保得到想要的信息

1.在文本编辑器中打开chapter09文件夹下的文件validation.html。

这个文件包含了带有各种表单字段的一个表单，这些字段包括文本字段、复选框、单选按钮和菜单。我们将为这个表单添加验证，但是，首先需要把验证插件添加到页面中。

2.紧接在添加jquery.js文件的＜script＞标签之后的空行中输入：

＜script src="../_js/jquery.validate.min.js"＞＜/script＞

Validation插件包含在chapter09目录下一个名为validation的文件夹中。

这个页面已经有另外一个＜script＞插件了，还有jQuery ready（）函数。只需要给页面的表单添加validate（）函数。

3.在$（document）.ready（function（）下面的空行中输入：

$（'#signup'）.validate（）；

这个表单有一个ID为signup：

＜form action="process.php"method="post"name="signup"id="signup"＞

因此$（'#signup'）使用jQuery来选择表单，并且validate（）给表单应用了验证插件。然而，在指定某些验证规则之前，表单是不会得到验证的。因此，首先，我们将使得name字段成为必需的并且提供一个定制的错误消息。

4.找到name字段的HTML，即＜input name="name"type="text"id="name"＞，添加class和title属性，使得标记如下所示（修改的部分用粗体显示）：

＜input name="name"type="text"id="name"

class="required"title="Please type your name."＞

代码的class="required"部分使得Validation插件知道这个字段是必需的，而title属性指定了如果访问者没有填写这个字段将会看到的错误消息。

5.保存页面，在Web浏览器中预览，并且单击Submit按钮。

由于name字段没有填写，因此一条错误消息将会出现在字段的右边（图9-8中的圆圈所示）。

图　9-8　现在不必担心错误消息的外观，我们将在9.5.4节学习如何格式化错误消息

祝贺你，你已经使用9.4.2节所介绍的基本方法给表单添加了验证。接下来，我们将为“date of birth”字段添加另一个验证规则。

提示：如果没有看到一条错误消息，而是得到带有“Form Processed”标题的一个页面，说明验证没有工作并且表单无论如何还是提交了。再次检查步骤1～4，确保没有任何输入错误。

6.找到出生日期字段的HTML，即＜input name="dob"type="text"id="dob"＞，并且添加class和title属性，以使该标签如下所示（修改的地方用粗体显示）：

＜input name="dob"type="text"id="dob"class="date"8

title="Please type your date of birth using this format：01/19/2000"＞

由于没有添加required类，因此填充这个字段是可选的。然而，如果访问者确实在字段中输入任何内容，class="date"告诉插件输入必须是日期的格式。我们再次使用title属性来保存字段无效时候的错误消息。保存这个页面并在Web浏览器中预览，可以在出生日期字段输入类似kjsdf的内容，并尝试提交表单。

注意：如果确实想要求访问者填充出生日期字段，并且要求他们输入一个有效的日期，只要给class属性添加required就行了。只要确保date和required用一个空格隔开：

class="date required"

可以使用同样的技术来验证一个菜单（＜select＞tag）。

7.找到打开选择标签的HTML，即＜select name="planet"id="planet"＞，并且添加class和title属性，以便标签看上去如下所示（修改的地方用粗体表示）：

＜select name="planet"id="planet"class="required"?

title="Please choose a planet."＞

可以通过添加一个validation类和title属性，像验证文本字段那样验证菜单。

现在是时候尝试高级验证方法了。