快速学习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 相关文章推荐
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
详细分析vue表单数据的绑定
Jul 20 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
更改localhost为其他名字的方法
2014/02/10 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
php实现session共享的实例方法
2019/09/19 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python多维数组切片方法
2018/04/13 Python
python使用matplotlib绘制热图
2018/11/07 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
python 装饰器的使用示例
2020/10/10 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
银行出纳岗位职责
2013/11/25 职场文书
成考报名单位证明范本
2014/01/16 职场文书
大学校务公开实施方案
2014/03/31 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python