快速学习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 相关文章推荐
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
js 金额文本框实现代码
Feb 14 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
vue实现动态按钮功能
May 13 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 常用函数库和一些实用小技巧
2009/01/01 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
VSCode配置react开发环境的步骤
2017/12/27 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
如何运行Python程序的方法
2013/04/21 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Python 字典中的所有方法及用法
2020/06/10 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
信息系统专业个人求职信范文
2013/12/07 职场文书
鲜花方阵解说词
2014/02/13 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
业务员辞职信范文
2015/03/02 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
余世维讲座观后感
2015/06/11 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers