你的位置:首页 > Java教程

[Java教程]jquery validate插件高级表单验证


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

  1. $('idOfForm').validate({
  2. //options go in here
  3. });//end validate();

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

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

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

图9-6中的表单的HTML如下所示:

  1. <form action="process.php"method="post"id="signup">
  2. <div>
  3. <label for="name">Name</label>
  4. <input name="name"type="text">
  5. </div>
  6. <div>
  7. <label for="email">E-mail Address</label>
  8. <input name="email"type="text">
  9. </div>
  10. <div>
  11. <input type="submit"name="submit"value="Submit">
  12. </div>
  13. </form>

这个表单包含两个文本字段,以粗体显示,一个用于人的名字,一个用于E-mail地址。本小节处理这两个字段的验证,使用高级规则来确保名字字段和E-mail字段都填充了并且格式正确。

注意:可以在http://docs.jquery.com/Plug-ins/Validation/validate#options找到Validation插件的一个完整的选项列表。

validate高级规则

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

  1. rules:{
  2. fieldname:'validationType'
  3. }

对象名为rules,其中,可以指定字段以及想要应用到该字段的验证类型。然后,整个对象传递给validate()函数。例如,在图9-6所示的表单中,为了让名字字段成为必需的,可以对前面所述的字段应用validate()函数,然后把rules对象传递给该函数,如下所示:

  1. $('#signup').validate({
  2. rules:{
  3. name:'required'
  4. }
  5. });//end validate()

在这个例子中,字段的名字为name,并且规则指定了这个字段是必需的。要对一个表单字段应用多个验证规则,必须为该字段创建另一个对象。例如,要针对图9-6中的表单扩展验证规则,可以添加一条规则,不仅使得email字段是必需的,而且也指定了E-mail地址必须是有效的格式:

  1. 1$('#signup').validate({
  2. 2 rules:{
  3. 3 name:'required',
  4. 4 email:{
  5. 5 required:true,
  6. 6 email:true
  7. 7}
  8. 8}
  9. 9});//end validate()
  10. //原文:www.uphtm.com

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

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

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

  1. $('#signup').validate({
  2. rules:{
  3. name:'required',
  4. email:{
  5. required:true,
  6. email:true
  7. },
  8. birthday:'date'
  9. }
  10. });//end validate()
  11. //原文:www.uphtm.com

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

  1. $('#signup').validate({
  2. rules:{
  3. name:'required',
  4. email:{
  5. required:true,
  6. email:true
  7. },
  8. birthday:{
  9. date:true,
  10. required:true
  11. }
  12. }
  13. });//end validate()
  14. //原文:www.uphtm.com

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

·minlength。这个字段必须包含至少指定的数目的字符。例如,确保一个字段至少输入了6个字符的规则是:

  1. minlength:6

·maxlength。这个字段必须包含不多于指定数目的字符。例如,确保输入到字段中的字符不超过100个的规则是:

  1. maxlength:100

·rangelength。minlength和maxlength的一个组合。指定了一个字段中所允许的最小字符数和最大字符数。例如,确保一个字段包含至少6个字符而不超过100个字符的规则是:

  1. rangelength:[6,100]

·min。要求字段包含一个数值,并且等于或大于指定的数值。例如,如下的规则要求字段包含一个数值,并且该数值大于或等于10。

  1. min:10

在这个例子中,如果访问者输入8,字段无法通过验证,因为8小于10。同理,如果访问者输入一个单词eight,那么字段也无法通过验证,并且会产生一条错误消息。

·max。和min一样,但是指定了字段可以包含的最大的值。例如,要确保一个字段包含的值小于1000,可以使用如下规则:

  1. max:1000

·range。组合了min和max来指定字段必须包含的最小值和最大值。例如,要确保一个字段包含至少10但不超过1000的数值,可以使用:

  1. range:[10,1000]

·equalTo。要求一个字段内容匹配其他字段。例如,在一个登录表单上,通常要求访问者输入一个密码然后通过再次输入密码来验证它。通过这种方式,访问者可以确保第一次没有输错密码。要使用这个方法,必须指定一个字符串,其中包含有效的选择器。例如,假设第一个密码字段有一个ID为password。如果想要确保“验证密码”字段和第一个密码字段匹配,可以使用这段代码:

  1. equalTo:’#password'

可以组合使用这些高级验证规则。只要一次处理一个字段就行了。这里有它们如何一起工作的一个例子。假设有一个表单包含了两个字段,一个用于创建密码,另一个用于确认密码。这两个字段的HTML如下所示:

  1. <input name="password"type="password"id="password">
  2. <input name="confirm_password"type="password"id="confirm_password">

这两个字段都是必需的,并且密码必须至少有8个字符,但是不超过16个字符。最后,我们要确保“确认密码”字段匹配其他的密码字段。假设表单的ID为signup,可以使用如下代码验证这两个字段:

  1. $('#signup').validate({
  2. rules:{
  3. password:{
  4. required:true,
  5. rangelength:[8,16]
  6. },
  7. confirm_password:{
  8. equalTo:’#password'
  9. }
  10. }
  11. });//end validate()

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