我的书签
添加书签
移除书签9.4.3 高级验证
Validation插件提供了另一种方法来为一个表单添加验证，而不需要改变字段的HTML。此外，这个插件提供了广泛的附加选项来控制它如何工作。我们通过给validate（）函数传递一个对象直接量（参见4.8.3节）来设置这些选项，其中包含了每个选项的单独对象。例如，要指定一条验证规则，我们包含了该规则的代码的一个对象。首先，紧跟着validation函数的第一个圆括号的后面，我们包含一个开始花括号，并且在函数的结束圆括号的前面，放置一个结束花括号。
$（'idOfForm'）.validate（{
//options go in here
}）；//end validate（）；
这对花括号表示一个对象直接量，它将包含选项设置。以这种方式使用Validation可能有点容易令人混淆，要理解插件的作者想要它如何工作，最好方法是看一个简单的示例，如图9-6所示。
图 9-6 即便使用这样一个简单的表单，也可以使用Validation插件的高级选项实现更好的控制
提示：我们可以把9.4.2节所介绍的基本验证方法和这里所介绍的高级验证方法组合到同一个表单上。对于只有一条验证规则和错误消息的字段，可以使用基本验证方法，因为它很快捷，而只是对于更为复杂的验证使用高级验证方法。例如，9.5节的教程使用这两种方法来验证一个单个的表单。
图9-6中的表单的HTML如下所示：
＜form action="process.php"method="post"id="signup"＞
＜div＞
＜label for="name"＞Name＜/label＞
＜input name="name"type="text"＞
＜/div＞
＜div＞
＜label for="email"＞E-mail Address＜/label＞
＜input name="email"type="text"＞
＜/div＞
＜div＞
＜input type="submit"name="submit"value="Submit"＞
＜/div＞
＜/form＞
这个表单包含两个文本字段，以粗体显示，一个用于人的名字，一个用于E-mail地址。本小节处理这两个字段的验证，使用高级规则来确保名字字段和E-mail字段都填充了并且格式正确。
注意：可以在http：//docs.jquery.com/Plug-ins/Validation/validate#options找到Validation插件的一个完整的选项列表。
高级规则
指定验证规则的高级方法包括，传递一个对象，其中包含了表单字段名字和验证规则或想要应用到该字段的规则（参见4.8.3节）。该对象的基本结构如下所示：
rules：{
fieldname：'validationType'
}
对象名为rules，其中，可以指定字段以及想要应用到该字段的验证类型。然后，整个对象传递给validate（）函数。例如，在图9-6所示的表单中，为了让名字字段成为必需的，可以对前面所述的字段应用validate（）函数，然后把rules对象传递给该函数，如下所示：
$（'#signup'）.validate（{
rules：{
name：'required'
}
}）；//end validate（）
在这个例子中，字段的名字为name，并且规则指定了这个字段是必需的。要对一个表单字段应用多个验证规则，必须为该字段创建另一个对象。例如，要针对图9-6中的表单扩展验证规则，可以添加一条规则，不仅使得email字段是必需的，而且也指定了E-mail地址必须是有效的格式：
1$（'#signup'）.validate（{
2 rules：{
3 name：'required'，
4 email：{
5 required：true，
6 email：true
7}
8}
9}）；//end validate（）
注意：根据JavaScript对象直接量的规则，我们必须用一个逗号来结束每个名/值对，但最后一个名/值对除外。例如，在上面代码的第3行中，name：'required'的后面必须有一个逗号，因为其他规则（用于email字段）跟在后面。参见4.8.3节回顾一下对象直接量是如何工作的。
粗体显示的第4行到第7行，指定了用于email字段的规则。这个字段的名字是email，如HTML中所指定的（参见9.4.3节），required：true使得该字段是必需的，而email：true确保字段包含一个E-mail地址。
可以使用表9-2所列出的任何的验证类型。例如，假设给这个例子使用的表单添加一个名为birthday的字段。要确保在这个字段中输入的是日期，可以像下面这样扩展规则列表：
$（'#signup'）.validate（{
rules：{
name：'required'，
email：{
required：true，
email：true
}，
birthday：'date'
}
}）；//end validate（）
如果还想让birthday字段是必需的，可以把代码做如下调整：
$（'#signup'）.validate（{
rules：{
name：'required'，
email：{
required：true，
email：true
}，
birthday：{
date：true，
required：true
}
}
}）；//end validate（）
正如前面提到的，可以对高级验证规则所做的最强大和有用的事情是，要求访问者的输入具有某个最小或最大长度。例如，在一个投诉报告表单上，我们可能想要限制评论长度，例如，200个字符，这样，客户会切中要点而不是长篇大论。也有规则可以确保输入的数字在某个范围内，因此，如果表单不是要足够容易以供古人使用的话，我们不接受1900年以前的出生日期。
·minlength。这个字段必须包含至少指定的数目的字符。例如，确保一个字段至少输入了6个字符的规则是：
minlength：6
·maxlength。这个字段必须包含不多于指定数目的字符。例如，确保输入到字段中的字符不超过100个的规则是：
maxlength：100
·rangelength。minlength和maxlength的一个组合。指定了一个字段中所允许的最小字符数和最大字符数。例如，确保一个字段包含至少6个字符而不超过100个字符的规则是：
rangelength：[6，100]
·min。要求字段包含一个数值，并且等于或大于指定的数值。例如，如下的规则要求字段包含一个数值，并且该数值大于或等于10。
min：10
在这个例子中，如果访问者输入8，字段无法通过验证，因为8小于10。同理，如果访问者输入一个单词eight，那么字段也无法通过验证，并且会产生一条错误消息。
·max。和min一样，但是指定了字段可以包含的最大的值。例如，要确保一个字段包含的值小于1000，可以使用如下规则：
max：1000
·range。组合了min和max来指定字段必须包含的最小值和最大值。例如，要确保一个字段包含至少10但不超过1000的数值，可以使用：
range：[10，1000]
·equalTo。要求一个字段内容匹配其他字段。例如，在一个登录表单上，通常要求访问者输入一个密码然后通过再次输入密码来验证它。通过这种方式，访问者可以确保第一次没有输错密码。要使用这个方法，必须指定一个字符串，其中包含有效的选择器。例如，假设第一个密码字段有一个ID为password。如果想要确保“验证密码”字段和第一个密码字段匹配，可以使用这段代码：
equalTo：’#password'
可以组合使用这些高级验证规则。只要一次处理一个字段就行了。这里有它们如何一起工作的一个例子。假设有一个表单包含了两个字段，一个用于创建密码，另一个用于确认密码。这两个字段的HTML如下所示：
＜input name="password"type="password"id="password"＞
＜input name="confirm_password"type="password"id="confirm_password"＞
这两个字段都是必需的，并且密码必须至少有8个字符，但是不超过16个字符。最后，我们要确保“确认密码”字段匹配其他的密码字段。假设表单的ID为signup，可以使用如下代码验证这两个字段：
$（'#signup'）.validate（{
rules：{
password：{
required：true，
rangelength：[8，16]
}，
confirm_password：{
equalTo：’#password'
}
}
}）；//end validate（）
高级用户提示验证服务器
尽管JavaScript验证能够很快地检查用户输入，有时候，还是需要检查服务器来看看一个字段是否有效。例如，假设有一个登录表单，它允许访问者创建自己的用户名以便在站点论坛上使用。不能有两个人具有相同的用户名，因此，如果某人想要使用的用户名在表单提交之前已经被使用了，能够通知填写表单的人才会有用。在这个例子中，必须查询服务器以确定该用户名是否可用。
Validation插件提供了一个名为remote的高级验证方法，它允许我们检查服务器。这个方法允许我们把字段名以及访问者输入到字段中的值传递给一个服务器端页面（例如一个PHP、JSP、ASP或Cold Fusion页面）。然后服务器端页面接收这些信息并对其做一些事情，例如查看用户名是否有效，然后用一个true（通过验证）或false（验证失败）响应表单。
假设有一个名为“username”的字段，它是必需的而且不能是站点上当前已经使用的一个名字。要为该字段创建一条规则（使用9.4.3节介绍的高级验证方法），可以添加如下的规则对象：
username：{
required：true，
remote：'check_username.php'
}
remote方法接收一个字符串，其中包含了从当前页面到服务器上的一个页面的路径。在这个例子中，服务器上页面的名字是check_username.php。当Validation插件试图验证这个字段，它把字段的名字（username）以及访问者的输入发送给check_username.php，然后该页面判断用户名是否可用。如果这个名字可用，PHP页面返回单词'true'；如果用户名已经使用了，这个页面返回单词'false'并且显示字段没有通过验证。
这里所有的魔术都是通过Ajax的功能实现的，我们将在本书第四部分学习Ajax。要查看这个验证方法的工作示例，请访问http：//jquery.bassistance.de/validate/demo/captcha/。
高级错误消息
正如9.4.2节所介绍的，可以通过为错误消息文本添加一个title，从而很容易地为字段添加一条错误消息。然而，这种方法不允许我们为每种验证错误都添加一条单独的错误消息。例如，假设一个字段是必需的并且其中必须有一个数值。我们可能希望对于每个错误有两种不同的消息，分别是“This field is required”和“Please enter a number.”。我们无法使用title属性来做到这点。相反，必须给validate（）函数传递一个JavaScript对象。
这个过程类似于创建高级验证规则，参见上一节的介绍。messages对象的基本结构如下：
messages：{
feldname：{
methodType：'Error message'
}}
在上面的例子中，用要验证的字段替换fieldname，用分配的验证方法替换methodType。例如，要对一个password字段使用组合验证方法，并且为每种错误提供消息，可以添加如下粗体所示的代码：
$（'#signup'）.validate（{
rules：{
password：{
required：true，
rangelength：[8，16]
}，
confirm_password：{
equalTo：’#password'
}
}，//end of rules
messages：{
password：{
required："Please type the password you'd like to use."，
rangelength："Your password must be between 8 and 16 characters long."
}，
confrm_password：{
equalTo："The two passwords don't match."
}
}//end of messages
}）；//end validate（）
提示：正如你所见到的，使用高级方法可能需要很多的对象直接量，并且，所需的{和}字符的数量，往往使得代码难以理解。在使用Validation插件的高级方法的时候，一种较好的办法是慢点来，并且经常测试。不要试图在一次热闹的输入会话中尝试所有的规则和消息，而是添加一条规则，然后测试页面。如果验证无效，你可能在某处录入错误了，因此，在继续进行并添加另一条规则之前，先修改它。一旦规则完成了并且有效，为任何的错误消息添加对象直接量。再来一次一次添加一条消息，然后，经常测试。
