jQuery验证插件Validate的详细说明

JavaScript最常用的场合是表单验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件。验证是最古老的jQuery插件之一，已经被世界各地的不同项目所验证，并得到了许多Web开发人员的好评。作为标准的验证方法库，验证具有以下特征：

1.内置验证规则：内置验证规则有19种，如必填项、号码、Email、URL、信用卡号。2.自定义验证规则：您可以轻松自定义验证规则。3.简单强大的验证信息提示：提供默认的验证信息提示，并提供自定义默认提示信息的功能。4.实时验证：验证可能由按键或模糊事件触发，而不仅仅是在提交表单时。

Validate.js下载地址：http://plugins.jquery.com/project/validatemetadata.js下载地址：http://plugins.jquery.com/project/metadata用法：1。介绍jQuery库和验证插件

复制代码如下： script src=' http 3360 script/jquery-1 . 6 . 4 . js ' type=' text/JavaScript '/script script src=' http 3360 script/jquery . validate . js ' type=' text/JavaScript '/script

2.确定需要验证的表单

复制代码的代码如下： script type=' text/JavaScript '////！[CDATA[ $(文档)。ready(function(){ $(' # comment form '))。validate()；});//]]/脚本

3.对于不同的字段，编写验证规则并设置字段的相应属性

复制代码如下：必须填写：class='必填'。class='必填电子邮件'必须填写，内容符合电子邮件格式。类=“url”符合URL格式。最小长度='2 '最小长度为2。有19条规则可以验证：【javascript】查看plaincopyprint？必填字段remote:必填字段remote : '请更正此字段'，Email:电子邮件身份验证url:网址身份验证日期：日期身份验证日期ISO:日期(ISO)验证日期：数字：数字：数字：只能输入整数信用卡：信用卡号来验证是否等于：请再次输入相同的值。验证带有合法后缀的accept:字符串，以验证最大长度/最小长度：最大/最小长度验证范围长度：字符串长度范围验证范围：数字范围验证最大/最小：最大/最小验证

将要介绍的Js

复制的代码如下： script Type=' text/JavaScript ' src=' http 3360././scripts/jquery-1 . 3 . 1 . js '/script script Type=' text/JavaScript ' src=' http 3360 lib/jquery . validate . js '/script

已初始化的HTML

复制代码如下：脚本类型=' text/JavaScript ' $(function(){ $(' # comment form ')。validate ()}) eminput id=' curl ' name=' URL ' size=' 25 ' class=' URL '/p p label for=' c comment '您的评论/label em */Emtexarea id=' c comment ' name=' comment ' cols=' 22 ' class='必选'/textarea/ppin put class=' submit ' type=' submit ' value=' submit '/p

首先看看默认设置的规格

序号规则描述了必须输入的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。必选意味着必须填写

电子邮件意味着邮箱必须是正确的

用HTML在类中编写验证规范不合适，后期维护增加了成本，没有实现行为和结构的分离

因此，您可能希望清空HTML中的所有类，如下所示：

复制的代码如下： form class=' cmx form ' id=' comment form '方法=' get ' action=' ' fieldset legend， 使用验证提示/图例验证注释的简单示例P Label for=' cuser name ' name/Label em */em input id=' c username ' name=' username ' size=' 25 '/P Label for=' cemail ' email/Label em */em input id=' cemail ' name=' email ' size=' 25 '/P Label for=' curl ' URL/Label em/eminput id=' curl ' name=' URL ' size=' 25 '/P Label for=' ccoment '您的注释

射流研究…

副本代码如下： $(文档)。ready(function(){ $(' # comment form '))。validate({ rule s : { username : { required d : true，minlength33602}，email : { required d : true，email:true }，url:'url '，comment:'required '，valcode : { formula : ' 7 9 ' } })；});/script

因为默认提示是英文的，所以可以重写为

复制代码如下： jquery . extend(jquery . validator . messages，{ required: '必填字段'、remote: '请更正此字段'、email: '请输入格式正确的电子邮件'、url: '请输入合法网站'、请输入合法日期'、日期ISO: '、合法日期(ISO)。number: '，合法号码'，digits: '，仅整数'，creditcard: '，合法信用卡号码'。EqualTo: '请再次输入相同的值'，accept: '，请输入一个带有合法后缀名称' maxlength: jQuery.format '的字符串(请输入一个最大长度为{0} '的字符串)。Minlength: jQuery.format('请输入最小长度为{0} '的字符串)，rangelength: jQuery.format('请输入长度在{0}和{1}之间的字符串')。Range: jQuery.format('请输入介于{0}和{1}之间的值')、max: jQuery.format('请输入最大值{0} ')、min: jQuery.format('请输入最小值{0} ')

建议创建一个新的js，并将其置于validate.js下.

关于小费的美化

代码复制代码如下：errorElement:'em '

创建可自定义的标签

复制代码如下： success3360 function(label){ label . text(')。addclass('成功')}

这里的参数标签指的是创建的标签，这里是“em”，然后可以添加自己的类。

完成js

复制代码如下： $ ('# commentform ')。validate({ rules : { username : { required d : true，minlength 33602}，email : { required3360 true，email:true }，url:'url '，comment:'required '，}，errorElement:'em '，success 3: function(label){ label . text(')。addCLaSS(' success ')} })；

对应的css

复制代码如下：em。错误{ background : URL(' images/unchecked . gif ')no-repeat 0px 0px；左填充left: 16px} em . success { background : URL(' images/checked . gif ')no-repeat 0px 0px；左填充left: 16px}。成功被置于。错误。嗯嗯。具体情况。你只能理解你不能说的话。嗯。

在做项目的过程中，是千变万化的，有时候需要满足不同的需求。validate还可以独立修改验证信息。

例如：

复制代码如下：消息： {用户名： {必填项： '主，我要填全'，minlength: '哎呦，长度不够' }}

完成js

复制代码如下： $ ('# commentform ')。validate({ rules : { username : { required d : true，minlength 33602}，email : { required3360 true，Email : true}，URL :' URL '，注释： '必需'，valcode 3360 {formula :' 7 9'})，messages 33: { username 3: { required 3360 ' owner，我要填写完整'，min文本(“”)。添加类(“成功”)} })；

这很好。

关于自定义验证规则

添加一个HTML代码

复制代码如下：p标签为='cvalcode '验证码/label input id=' val code ' name=' val code '/=7 9/p

自定义规则

副本代码如下： $。验证器。addmethod ('formula '，function (value，element，param){ return value==eval(param)}，'请正确输入验证信息')；

Formula是需要验证的方法的名称，例如required。value param返回的当前输入的值返回当前的自定义验证格式，例如：7 9尝试了eval方法来添加字符串

完成js

副本代码如下： $。验证器。addmethod ('formula '，function (value，element，param){ return value==eval(param)}，'请正确输入验证信息')；$('#commentForm ')。验证({ rule s : { username : { required d : true，minlength:2 }、email 3: { required d : true，email:true }、Url :' URL '、注释：' required '、valcode : {formula :' 7 9'})、消息33: { username 3: { required 3: ' master，我要add class(' success ')} })；

呃。如果学得不深，是基础的一部分。会继续深入研究。再见(_)/~ ~再见