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入门教程(12) js对象化编程
Jan 31 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
php获取随机数组列表的方法
2014/11/13 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
JS面向对象编程浅析
2011/08/28 Javascript
javascript的BOM汇总
2015/07/16 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
python实现寻找最长回文子序列的方法
2018/06/02 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
python退出循环的方法
2020/06/18 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
python excel多行合并的方法
2020/12/09 Python
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
会计实习自我鉴定
2013/12/04 职场文书
中学教师教育感言
2014/02/21 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
中秋晚会活动方案
2014/08/31 职场文书
单位租房协议书范本
2014/12/04 职场文书
红高粱观后感
2015/06/10 职场文书
2016年情人节问候语
2015/11/11 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android