9.4　表单验证

检查已经通过Web站点上的一个表单提交的反馈，却只发现访问者没有提供一个名字、E-mail地址或者一些其他的关键信息片段，这可能会令人沮丧。这是为什么呢?根据我们所创建的表单的类型，可能要求某些信息是必需的。

例如，如果潜在的读者没有输入一个E-mail地址来接受新闻组，那么用来提交一个E-mail新闻组的表单就不会有太大用处。同样，如果需要一个配送地址来发送一份目录或产品，就会希望确保访问者在表单上输入了他的地址。

此外，当从Web表单接收数据的时候，我们希望接收的数据格式正确，例如，表示订购数量的一个数字，或者是一个Web地址的格式正确的URL。确保访问者正确地输入信息，这叫做表单验证，使用JavaScript，可以在访问者提交不正确的信息之前识别出任何错误。

基本上，表单验证要求在表单提交之前检查表单字段，以确保提供了必需的信息，并且信息的格式是正确的。当访问者单击一个submit按钮或者当光标在文本字段中时按下回车键，表单的submit事件触发，而这通常是进行验证的时候。如果一切正确，表单信息会提交到Web服务器，就像通常的情况一样。然而，如果有问题，脚本停止提交过程并且在页面上显示错误，通常是在靠近有问题的表单字段的地方显示（如图9-5所示）。

图　9-5　当注册一个Yahoo账户的时候，如果没有正确地填充表单，会遇到很多红色的错误消息（带圈的部分）

检查以确保一个文本字段已经填充是很容易的。正如9.1.2节所介绍的，我们可以直接访问字段的value属性（例如，使用jQuery val（）函数），并且，如果值是一个空字符串，那么字段就是空的。但是，当检查其他类型的字段，例如复选框、单选按钮和菜单的时候，就需要一些技巧了。此外，当我们想要检查以确保访问者提交特定类型的信息的时候，例如E-mail地址、邮政编码、数值、日期等，需要编写一些复杂的JavaScript。幸运的是，不需要自己编写这些代码，Web上有丰富的表单验证脚本，并且其中最好的一个就是jQuery库的一个插件。

9.4.1　jQuery Validation插件

Validation插件（http：//bassistance.de/jquery-plug-ins/jquery-plug-in-validation/）是由Jorn Zaefferer开发的一个功能强大但易于使用的jQuery插件。它可以检查一个表单以确保所有必需的字段都已经填充了，并且检查确保访问者的输入符合特定的需求。例如，一个数量字段必须包含数值，一个E-mail字段必须包含E-mail地址。如果访问者没有正确地填充一个表单，插件将通过显示错误消息说明问题。

以下是使用Validation插件的基本过程：

1.下载jquery.js文件，并且将其添加到包含了要验证的表单的Web页面。

阅读4.2节中的“初学jQuer y”部分了解关于下载jQuer y库的详细信息。Validation插件使用了jQuery库，因此，首先需要把jquery.js文件添加到页面。

2.下载并添加Validation插件。

可以在http：//bassistance.de/jquery-plug-ins/jquery-plug-in-validation/找到这个插件。下载将会包含很多额外的内容，包括一个演示文件、测试等。实际上只需要jquery.validate.min.js文件（你也可以在教程目录的_js文件夹下看到这个插件，名为jquery.validate.min.js，参见本书9.3节的教程）。这个文件只是一个外部JavaScript文件，因此，按照1.2节的说明把这个文件连接到页面。

3.添加验证规则。

验证规则只是表示“让这个字段成为必需的，让这个字段接收一个E-mail地址”等指令。换句话说，这个步骤就是我们指定要验证哪个字段以及如何验证的地方。有几种方法可以添加验证规则：一种简单的方法是仅仅使用HTML（参见9.4.1节），另一种更为灵活但略微复杂的方法是使用JavaScript（参见9.4.2节）。

4.添加错误消息。

这个步骤是可选的。Validation插件带有一组预先定义好的错误消息，例如，“This field is required”、“Please enter a valid date”、“Please enter a valid number”等。这些基本的信息很好而且切中要害，但是，我们想要根据自己的表单来定制它们，以便错误消息为每个表单字段提供更明确的说明，例如，“Please type your name”或“Please tell us your date of birth”。

添加错误消息的方法有两种，简单的方法在9.4.2节讨论，更为灵活的方法在9.4.3节讨论。

注意：可以按照9.4.4节介绍的方法来控制错误消息的样式和位置。

5.对表单应用validate（）函数。

这个插件包含了一个函数，它使得所有的魔术发生：validate（）。要应用这个函数，首先使用jQuery来选择表单，然后给该选择添加函数。例如，假设有一个ID为signup的表单。HTML将会如下所示：

＜form action="process. php"method="post"name="signup"id="signup"＞应用验证的简单方式是：

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

validate（）函数可以接收许多不同的信息片段，它们影响到插件如何工作。例如，尽管可以在表单的HTML中指定验证规则和错误消息（参见下面的内容），但是也可以在调用validate（）函数的时候指定规则和错误（将在9.4.3节学习这一方法）。

一个非常基础的表单验证（包含本节所介绍的两个步骤）的完整的JavaScript代码可能会像下面这样简单：

＜script src="js/jquery-1.6.3.min.js"＞＜/script＞

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

＜script＞

$（document）.ready（function（）{

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

}）；//end ready

＜/script＞

提示：别忘了总是把脚本包含在jQuery的document.ready（）函数中，从而确保脚本在页面的HTML载入后运行（参见5.4.1节）。