JQuery扩展插件Validate 5添加自定义验证方法


Posted in Javascript onSeptember 05, 2011

示例如下:

<script type="text/javascript"> 
jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 
function(value, element, params) { //addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数) 
var exp = new RegExp(params); //实例化正则对象,参数为传入的正则表达式 
return exp.test(value); //测试是否匹配 
}, 
"格式错误"); //addMethod第3个参数:默认错误信息 
$(function() { 
$("#signupForm").validate( 
{ 
rules: { 
txtPassword1: "required", //密码1必填 
txtPassword2: { //密码2的描述多于1项使用对象类型 
required: true, //必填,这里可以是一个匿名方法 
equalTo: "#txtPassword1", //必须与密码1相等 
rangelength: [5, 10], //长度5-10之间 
regex: "^\\w+$" //使用自定义的验证规则,在上例中新增的部分 
}, 
txtEmail: "email" //电子邮箱必须合法 
}, 
messages: { 
txtPassword1: "您必须填写", 
txtPassword2: { 
required: "您必须填写", 
equalTo: "密码不一致", 
rangelength: "长度必须介于{0} 和 {1} 之间的字符串", 
regex: "密码只能是数字、字母与下划线" 
} 
}, 
debug: false, //如果修改为true则表单不会提交 
submitHandler: function() { 
alert("开始提交了"); 
} 
}); 
}); 
</script>

运行结果:
JQuery扩展插件Validate 5添加自定义验证方法
注意,如果参数有多个可以使用数组,如regex:[1,3,5],方法中可以使用下标访问:params[0]
网友提供的一些扩展验证方法:
// 手机号码验证 
jQuery.validator.addMethod("mobile", function(value, element) { 
var length = value.length; 
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ 
return this.optional(element) || (length == 11 && mobile.test(value)); 
}, "手机号码格式错误"); 
// 电话号码验证 
jQuery.validator.addMethod("phone", function(value, element) { 
var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/; 
return this.optional(element) || (tel.test(value)); 
}, "电话号码格式错误"); 
// 邮政编码验证 
jQuery.validator.addMethod("zipCode", function(value, element) { 
var tel = /^[0-9]{6}$/; 
return this.optional(element) || (tel.test(value)); 
}, "邮政编码格式错误"); 
// QQ号码验证 
jQuery.validator.addMethod("qq", function(value, element) { 
var tel = /^[1-9]\d{4,9}$/; 
return this.optional(element) || (tel.test(value)); 
}, "qq号码格式错误"); 
// IP地址验证 
jQuery.validator.addMethod("ip", function(value, element) { 
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; 
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256)); 
}, "Ip地址格式错误"); 
// 字母和数字的验证 
jQuery.validator.addMethod("chrnum", function(value, element) { 
var chrnum = /^([a-zA-Z0-9]+)$/; 
return this.optional(element) || (chrnum.test(value)); 
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)"); 
// 中文的验证 
jQuery.validator.addMethod("chinese", function(value, element) { 
var chinese = /^[\u4e00-\u9fa5]+$/; 
return this.optional(element) || (chinese.test(value)); 
}, "只能输入中文"); 
// 下拉框验证 
$.validator.addMethod("selectNone", function(value, element) { 
return value == "请选择"; 
}, "必须选择一项"); 
// 字节长度验证 
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 
var length = value.length; 
for (var i = 0; i < value.length; i++) { 
if (value.charCodeAt(i) > 127) { 
length++; 
} 
} 
return this.optional(element) || (length >= param[0] && length <= param[1]); 
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

Validate_20110905.rar
Javascript 相关文章推荐
javascript白色简洁计算器
May 04 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
js中的this的指向问题详解
Aug 29 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 #Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 #Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 #Javascript
Javascript变量函数浅析
Sep 02 #Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 #Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 #Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 #Javascript
You might like
PHP新手上路(五)
2006/10/09 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
javascript比较文档位置
2008/04/08 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python 查看文件的读写权限方法
2018/01/23 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Python实现快速排序的方法详解
2019/10/25 Python
大数据分析用java还是Python
2020/07/06 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
社区学习十八大感想
2014/01/22 职场文书
给校长的建议书500字
2014/05/15 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
违纪学生保证书
2015/02/27 职场文书
公司备用金管理制度
2015/08/04 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript