jQuery验证插件 Validate详解


Posted in Javascript onNovember 20, 2014

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。作为一个标准的验证方法库,Validation拥有如下特点:

1.内置验证规则: 拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则
2.自定义验证规则: 可以很方便地自定义验证规则
3.简单强大的验证信息提示: 默认了验证信息提示,并提供自定义覆盖默认的提示信息的功能
4.实时验证: 可能通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证

validate.js下载地址: http://plugins.jquery.com/project/validate
metadata.js下载地址: http://plugins.jquery.com/project/metadata
使用方法:
1.引入jQuery库和Validation插件

<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>  

<script src="scripts/jquery.validate.js" type="text/javascript"></script>

2.确定哪个表单需要被验证

<script type="text/javascript">  

////<![CDATA[  

$(document).ready(function(){  

    $("#commentForm").validate();  

});  

//]]>  

</script> 

3.针对不同的字段,进行验证规则编码,设置字段相应的属性

class="required"   必须填写  

class="required email"        必须填写且内容符合Email格式验证  

class="url"             符合URL格式验证  

minlength="2"      最小长度为2  

可验证的规则有19种:

[javascript] view plaincopyprint?

required:      必选字段  

remote:        "请修正该字段",  

email:         电子邮件验证  

url:           网址验证  

date:          日期验证  

dateISO:       日期 (ISO)验证  

dateDE:  

number:        数字验证  

numberDE:  

digits:        只能输入整数  

creditcard:    信用卡号验证  

equalTo:       ”请再次输入相同的值“验证  

accept:        拥有合法后缀名的字符串验证  

maxlength/minlength:    最大/最小长度验证  

rangelength:     字符串长度范围验证  

range:           数字范围验证  

max/min:         最大值/最小值验证 

需要引入的js

<script type="text/javascript" src="../../scripts/jquery-1.3.1.js"></script>

<script type="text/javascript" src="lib/jquery.validate.js"></script>

初始化的HTML

<script type="text/javascript">

$(function(){

 $("#commentForm").validate() 

})

</script>

<form class="cmxform" id="commentForm" method="get" action="">

 <fieldset>

   <legend>一个简单的validate验证带验证提示的评论例子</legend>

   <p>

     <label for="cusername">姓名</label>

     <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />

   </p>

   <p>

     <label for="cemail">电子邮件</label>

     <em>*</em><input id="cemail" name="email" size="25" class="required email"  />

   </p>

   <p>

     <label for="curl">网址</label>

     <em>  </em><input id="curl" name="url" size="25" class="url" />

   </p>

   <p>

     <label for="ccomment">你的评论</label>

     <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required" ></textarea>

   </p>

 <p>

     <input class="submit" type="submit" value="提交"/>

   </p>

首先看默认设置的规格

序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

required表示必须填写的

email表示必须正确的邮箱

把验证的规格写在HTML内的class内,方法欠妥,后期的维护增加成本,没有实现行为与结构的分离

所以,可以想把HTML内的class都清空,如下:

<form class="cmxform" id="commentForm" method="get" action="">

 <fieldset>

   <legend>一个简单的validate验证带验证提示的评论例子</legend>

   <p>

     <label for="cusername">姓名</label>

     <em>*</em><input id="cusername" name="username" size="25" />

   </p>

   <p>

     <label for="cemail">电子邮件</label>

     <em>*</em><input id="cemail" name="email" size="25"  />

   </p>

   <p>

     <label for="curl">网址</label>

     <em>  </em><input id="curl" name="url" size="25" />

   </p>

   <p>

     <label for="ccomment">你的评论</label>

     <em>*</em><textarea id="ccomment" name="comment" cols="22" ></textarea>

   </p>

 <p>

     <input class="submit" type="submit" value="提交"/>

   </p>

js

 $(document).ready(function(){

    $("#commentForm").validate({

      rules:{

        username:{

          required:true,

          minlength:2

        },

        email:{

          required:true,

          email:true

        },

        url:"url",

        comment:"required",

        valcode: {

          formula: "7+9"  

        }

      }

    });

  });

  </script>

因为默认的提示是英文的,可以改写成

jQuery.extend(jQuery.validator.messages, {

        required: "必选字段",

        remote: "请修正该字段",

        email: "请输入正确格式的电子邮件",

        url: "请输入合法的网址",

        date: "请输入合法的日期",

        dateISO: "请输入合法的日期 (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 下面.

关于提示的美化

jQuery验证插件 Validate详解

errorElement:"em"

创建一个标签,可以自定义

success:function(label){

        label.text(" ").addClass('success')

      }

这里的参数label是指向创建的标签,这里也就是”em“ 然后情况自己的内容,在加上自己的class就可以了

完整的js

  $("#commentForm").validate({

      rules:{

        username:{

          required:true,

          minlength:2

        },

        email:{

          required:true,

          email:true

        },

        url:"url",

        comment:"required",

      },

      errorElement:"em",

      success:function(label){

        label.text(" ").addClass('success')

      }

    });

相对应的css

em.error {

  background:url("images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

}

em.success {

  background:url("images/checked.gif") no-repeat 0px 0px;

  padding-left: 16px;

}

.success放到.error下面。。。唔唔。。具体的情况。。只可体会不可言会。。唔。。

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

例如:

  messages:{

        username:{

          required:"主人,我要填的满满的",

          minlength:"哎唷,长度不够耶"

        }

   }

完整的js

 $("#commentForm").validate({

      rules:{

        username:{

          required:true,

          minlength:2

        },

        email:{

          required:true,

          email:true

        },

        url:"url",

        comment:"required",

        valcode: {

          formula: "7+9"  

        }

      },

      messages:{

        username:{

          required:"主人,我要填的满满的",

          minlength:"哎唷,长度不够耶"

        }

      },

      errorElement:"em",

      success:function(label){

        label.text(" ").addClass('success')

      }

    });

这里就可以啦。

关于自定义验证规则

增加一段HTML代码

 <p>

     <label for="cvalcode">验证码</label>

     <input id="valcode" name="valcode"  />=7+9

   </p>

自定一个规则

$.validator.addMethod("formula",function(value,element,param){

      return value==eval(param)

    },"请正确输入验证信息");

formula是需要验证方法的名字 好比如required 必须的。
value返回的当前input的value值
param返回的是当前自定义的验证格式 好比如:7+9
在试用了eval方法 让字符串相加

完整的js

$.validator.addMethod("formula",function(value,element,param){

      return value==eval(param)

    },"请正确输入验证信息");

    $("#commentForm").validate({

      rules:{

        username:{

          required:true,

          minlength:2

        },

        email:{

          required:true,

          email:true

        },

        url:"url",

        comment:"required",

        valcode: {

          formula: "7+9"  

        }

      },

      messages:{

        username:{

          required:"主人,我要填的满满的",

          minlength:"哎唷,长度不够耶"

        }

      },

      errorElement:"em",

      success:function(label){

        label.text(" ").addClass('success')

      }

    });

额。。没了 学的不深,这是基础的一部分。。还会继续深入学习去。掰掰( ^_^ )/~~拜拜

Javascript 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 #Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 #Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 #Javascript
jQuery Ajax()方法使用指南
Nov 19 #Javascript
javascript匿名函数实例分析
Nov 18 #Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 #Javascript
删除Javascript Object中间的key
Nov 18 #Javascript
You might like
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
JavaScript实现模态对话框实例
2020/01/13 Javascript
python关键字and和or用法实例
2015/05/28 Python
python 2.7.14安装图文教程
2018/04/08 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
python 8种必备的gui库
2020/08/27 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
上课迟到检讨书
2014/02/19 职场文书
初中新生军训方案
2014/05/13 职场文书
出国签证在职证明范本
2014/11/24 职场文书
质量保证书
2015/01/17 职场文书
教师考核鉴定意见
2015/06/05 职场文书
团结友爱主题班会
2015/08/13 职场文书
导游词之五台山
2019/10/11 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python