jquery validate插件高级表单验证

Validation(validate)插件提供了另一种方法来为一个表单添加验证，而不需要改变字段的HTML。此外，这个插件提供了广泛的附加选项来控制它如何工作。我们通过给validate（）函数传递一个对象直接量来设置这些选项，其中包含了每个选项的单独对象。例如，要指定一条验证规则，我们包含了该规则的代码的一个对象。首先，紧跟着validation函数的第一个圆括号的后面，我们包含一个开始花括号，并且在函数的结束圆括号的前面，放置一个结束花括号。

$（'idOfForm'）.validate（{
//options go in here
}）；//end validate（）；

这对花括号表示一个对象直接量，它将包含选项设置。以这种方式使用Validation可能有点容易令人混淆，要理解插件的作者想要它如何工作，最好方法是看一个简单的示例，如图9-6所示。

图　9-6　即便使用这样一个简单的表单，也可以使用Validation插件的高级选项实现更好的控制

提示：我们可以把jquery validate基本验证方法http://www.uphtm.com/js/432.html和这里所介绍的高级验证方法组合到同一个表单上。对于只有一条验证规则和错误消息的字段，可以使用基本验证方法，因为它很快捷，而只是对于更为复杂的验证使用高级验证方法。

图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插件的一个完整的选项列表。

validate高级规则

指定验证规则的高级方法包括，传递一个对象，其中包含了表单字段名字和验证规则或想要应用到该字段的规则。该对象的基本结构如下所示：

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（）
//原文:www.uphtm.com

注意：根据JavaScript对象直接量的规则，我们必须用一个逗号来结束每个名/值对，但最后一个名/值对除外。例如，在上面代码的第3行中，name：'required'的后面必须有一个逗号，因为其他规则（用于email字段）跟在后面。。

粗体显示的第4行到第7行，指定了用于email字段的规则。这个字段的名字是email，如HTML中所指定的，required：true使得该字段是必需的，而email：true确保字段包含一个E-mail地址。

可以使用表9-2所列出的任何的验证类型。例如，假设给这个例子使用的表单添加一个名为birthday的字段。要确保在这个字段中输入的是日期，可以像下面这样扩展规则列表：

$（'#signup'）.validate（{
rules：{
name：'required'，
email：{
required：true，
email：true
}，
birthday：'date'
}
}）；//end validate（）
//原文:www.uphtm.com

如果还想让birthday字段是必需的，可以把代码做如下调整：

$（'#signup'）.validate（{
rules：{
name：'required'，
email：{
required：true，
email：true
}，
birthday：{
date：true，
required：true
}
}
}）；//end validate（）
//原文:www.uphtm.com

正如前面提到的，可以对高级验证规则所做的最强大和有用的事情是，要求访问者的输入具有某个最小或最大长度。例如，在一个投诉报告表单上，我们可能想要限制评论长度，例如，200个字符，这样，客户会切中要点而不是长篇大论。也有规则可以确保输入的数字在某个范围内，(转载请注明出处：http://www.uphtm.com/js/433.html)因此，如果表单不是要足够容易以供古人使用的话，我们不接受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（）

转载请注明出处：http://www.uphtm.com/js/433.html

秒客网

jquery validate插件高级表单验证

相关文章