jqueryvalidate插件高级表单验证

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

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:true7}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

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航