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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
vue3.0中使用element的完整步骤
Mar 04 Vue.js
分享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框架的性能
2008/01/10 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php常用数组函数实例小结
2016/12/29 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python判断操作系统类型代码分享
2014/11/22 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python datetime包函数简单介绍
2019/08/28 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
致跳远运动员广播稿
2014/02/11 职场文书
党校个人总结
2015/03/04 职场文书
产品调价通知函
2015/04/20 职场文书
学校节水倡议书
2015/04/29 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers