本文说明了jQuery validate插件的功能和用法。分享给大家参考，如下：

对于表单内容格式的验证，原生JS的编写相当繁琐。我写注册界面的时候，很多地方都用正则化来验证邮箱格式、用户名格式、密码格式，错误信息也应该用display:none/来显示和隐藏。使用jQuery validate插件后，开发速度大大加快！

1.jQuery validate插件提供了强大的验证功能。jQuery validate插件的官方网站是http://jqueryvalidation.org/,官方网站上有详细的文档介绍如何使用jQuery插件。对于插件的使用

(1)首先下载jquery.validate.js插件

然后将其插入到HTML文件中

脚本类型=' text/JavaScript ' src=' http : js/jquery-1 . 11 . 3 . js '/Script Script类型=' text/JavaScript ' src=' http : js/jquery . validate . js '/Script脚本类型=' text/JavaScript ' src=' http : js/js1 . js '/Script因为jQuery插件基于jQuery库，所以必须导入jQuery.js

(2) jQuery validate插件提供了$(表单)。validate(options)方法，这个插件附带了所需的验证规则，例如数字和字符。

其中窗体表示窗体元素名称，选项表示调用validate方法时的配置对象，所有用于显示配置信息和异常信息的规则都包含在对象选项中。

2.有许多方法可以使用jQuery验证。这里详细介绍了通过表单元素名称验证表单规则的方法。

也就是说，与HTML元素没有直接的联系，但是字段和验证规则是通过名称属性关联的。这种方法可以实现行为和结构的分离。

Form id='form-sp' fieldsetlegend用户登录/图例标签为=' username '用户名/labeinputtype=' text ' name=' username '/p p class=' tip '/p Label为=' password '密码/Label输入类型=' password '/PP class=' tip '/PP标签为=' confirm-password '然后输入/label输入类型=' password ' name=' confirm-password '/PP class=' tip '/p Label为=' verify'/label输入类型=' button' value

$('#form-sp ')。验证({ rule s : { Username : { Required d : True，minlength:3}，Password : { Required d : True，minlength:6}，Confirm-Password ' : { Required d : }，Confirm-Password ' : { Required-Password ' 33: { Required-Password '请输入您的用户名'，minlength: '输入next())；}})运行此代码后，它显示为

我们发现在定制规则后，表单有自己的验证方法。让我们看看验证对象中特定属性的作用

(1)首先，在规则属性中，我们根据表单的名称确定每个表单元素的规则：

例如，required:true

解释用户名，一个表单元素，不能为空。

Minlength:2，表示用户名至少为2个字符

Maxlength:10，这意味着用户名最多10个字符

(2)其次，在messages属性中，定义了表单中的信息不符合规则时的错误消息。

如果未修改，默认为英文提示。在这里，我们修改了username表单元素的required:属性的错误消息

因为当您报告错误时，会提示您“至少输入三个用户名。”

了解jQuery validate插件的两个基本属性规则和消息，

以下jQuery验证默认验证表单：

1要求：输入必须输入的字段。2 remote:'check.php '使用ajax方法调用check.php验证输入值。3电子邮件：您必须以正确的格式输入电子邮件。4 url:true请确保您输入的url格式正确。5日期：您必须以正确的格式输入日期。日期验证错误ie6。小心使用。6 datetrue您必须以正确的格式输入日期(ISO)，例如：2009年6月23日，1998年1月22日。只验证格式，不验证有效性。7 number:true您必须输入一个合法的数字(负数、十进制数)。8数字：必须输入整数。9信用卡：必须输入合法的信用卡号码。10等于：“#field”输入值必须与# field相同。11 accept:输入带有合法后缀名称(上传文件的后缀)的字符串。12 maxlength:5输入最大长度为5的字符串(汉字算作一个字符)。13 minlength:10输入最小长度为10的字符串(汉字算作一个字符)。14 rangelength:[5，10]输入一个长度必须在5到10之间的字符串(中文字符算作一个字符)。15范围：[5，10]输入值必须介于5和10之间。16max33605输入值不能大于5。17 min:10输入值不能小于10。这里，将不会逐一分析每个检查元素

让我们分析一个有趣的检查元素

(1)等于

用于equalTo元素的方法是equalTo: ' # filed '

在具体使用中，如果当前表单元素中的值等于其名称被归档的表单元素的值，它将不会报告错误，否则它将报告错误并显示错误消息。常见的应用是验证两次输入的密码在注册界面是否一致，例如：

plabel For=' password ' password/labe input type=' password ' name=' password '/PP class=' tip '/PP label For=' confirm-password '然后输入/labe input type=' password ' name=' confirm-password '/p对于此表单，有以下验证规则：

规则： { username : { Required d : True，minlength:3}，Password : { Required d : True，minlength:6}，Confirm-Password ' : { Required : True，等于：' # Password'}，只有当name=confirm-password的表单元素等于name=password的表单元素时，才不会报告错误，否则会显示错误消息。

(2)电子邮件验证元素，用于验证邮箱的格式

如果我们将email:true添加到上例的表单验证信息中，它会自动验证输出是否与邮箱格式匹配，如果不匹配，将返回false并显示错误消息；

4.4 .验证的其他方法

(1)用其他方法替换默认的提交方法

submit handler : function(form){ form . submit()；} SubmIthandler : FuncTion(form){ form . Ajax submit()；}您可以更改validate()对象的默认提交方法：

$ . validate . setdefaults({ Submit handler : function(form){ form . submit()；}})(2)debug:仅验证表单未提交

如果debug:为真，该表单将仅被验证，不会被提交。

您还可以更改validate()对象的默认提交方法

$ . validate . setdefaults({ debug : true；})(3)更改错误信息的显示位置

错误放置：函数(错误，元素){//第一个参数是错误消息，第二个参数是HTML中的元素error . appendo(element . parent())。//也可以直接以类名或id名的形式写//error . appendo('。class ')或error . appendo(' #)} error class String指定错误提示的css类名，可以自定义错误提示的样式。“错误”错误元素字符串使用什么标签来标记错误。默认值为label，可以更改为em。Label' errorContainer Selector显示或隐藏验证信息，当有错误信息时可以自动改变容器属性显示，没有错误时隐藏，用处不大。error container : ' # messagebox 1，# messagebox 2 ' error label container选择器将错误消息放在一个容器中。包装字符串，用什么标签包装上面的错误元素。

更多对jQuery感兴趣的读者可以查看本网站主题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》、0103010

希望本文对大家的jQuery程序设计有所帮助。