快速学习jQuery插件 jquery.validate.js表单验证插件使用方法


Posted in Javascript onDecember 01, 2015

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

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

使用方法:
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种:
required:      必选字段 
remote:        "请修正该字段", 
email:         电子邮件验证 
url:           网址验证 
date:          日期验证 
dateISO:       日期 (ISO)验证 
dateDE: 
number:        数字验证 
numberDE: 
digits:       
只能输入整数 
creditcard:    信用卡号验证 
equalTo:       “请再次输入相同的值”验证 
accept:        拥有合法后缀名的字符串验证 
maxlength/minlength:    最大/最小长度验证 
rangelength:     字符串长度范围验证 
range:           数字范围验证 
max/min:         最大值/最小值验证 
另个一种验证方法(将所有的与验证相关的信息写到class属性中方便管理)
1).引入一个新的jQuery插件---jquery.metadata.js(支持固定格式解析的jQuery插件)

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

2).改变调用的验证方法
<script type="text/javascript"> 
////<![CDATA[ 
$(document).ready(function(){ 
  //将$("#commentForm").validate(); 改成 
  $("#commentForm").validate({meta: "validate"}); 
}); 
//]]> 
</script>

3).将验证规则全部编写到class属性中

class="{validate:{required: true, minlength: 2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" 
class="{validate:{required: true, email: true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}"

也可以通过name属性来关联字段和验证规则的验证写法(验证行为和HTML结构完全脱钩)

$("#commentForm").validate({ 
  rules: { 
   username: { 
     required: true, 
     minlength: 2 
   }, 
   email: { 
     required: true, 
     email: true 
   }, 
   url:"url", 
   comment: "required" 
  }, 
  messages: { 
   username: { 
     required: '请输入姓名', 
     minlength: '请至少输入两个字符' 
   }, 
   email: { 
     required: '请输入电子邮件', 
     email: '请检查电子邮件的格式' 
   }, 
   url: '请检查网址的格式', 
   comment: '请输入您的评论' 
  } 
});

国际化
Validation插件的验证信息默认语言是英文,如果要改成中文,只需要引入Validation提供的中文验证信息即可,引入代码如下:

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

自定义验证信息并美化
errorElement: "em",        //可以用其他标签,记住把样式也对应修改 
success: function(label) {  //label指向上面那个错误提示信息标签em 
   label.text("")            //清空错误提示消息 
       .addClass("success");  //加上自定义的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; 
}

自定义验证规则

//自定义一个验证方法 
$.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: '请至少输入两个字符' 
   }, 
   email: { 
     required: '请输入电子邮件', 
     email: '请检查电子邮件的格式' 
   }, 
   url: '请检查网址的格式', 
   comment: '请输入您的评论', 
   valcode: '验证码错误' 
  } 
});

以上就是关于表单验证插件jquery.validate.js的详细介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
js操作二进制数据方法
Mar 03 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
微信小程序排坑指南详解
May 23 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
VUE动态生成word的实现
Jul 26 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 #Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 #Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 #Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 #Javascript
易操作的jQuery表单提示插件
Dec 01 #Javascript
JavaScript保留关键字汇总
Dec 01 #Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 #Javascript
You might like
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PDO::getAttribute讲解
2019/01/28 PHP
js里的prototype使用示例
2010/11/19 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
毕业生的自我鉴定
2013/10/29 职场文书
工厂门卫岗位职责
2013/11/25 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
青年文明号申报材料
2014/12/23 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书