快速学习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 相关文章推荐
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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
php微信开发之谷歌测距
2018/06/14 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
javascript生成大小写字母
2015/07/03 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
import与export在node.js中的使用详解
2017/09/28 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
keras得到每层的系数方式
2020/06/15 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
电子商务专业实习生自我鉴定
2013/09/24 职场文书
迟到检讨书大全
2014/01/25 职场文书
八一慰问活动方案
2014/02/07 职场文书
检查接待方案
2014/02/27 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
公司投资建议书
2014/05/16 职场文书
授权委托书公证
2014/09/14 职场文书
上课不认真检讨书
2014/09/17 职场文书
2014年市场部工作总结
2014/11/25 职场文书
求职信范文怎么写
2015/03/19 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
民事纠纷协议书
2016/03/23 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python