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 相关文章推荐
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
分享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提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
jQuery中after的两种用法实例
2013/07/03 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
Python sys.argv用法实例
2015/05/28 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
详解Django admin高级用法
2019/11/06 Python
python实现ftp文件传输功能
2020/03/20 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
python实现移动木板小游戏
2020/10/09 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
2014年国庆晚会主持词
2014/09/19 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
爱心捐助活动总结
2015/05/09 职场文书
写给老师的保证书
2015/05/09 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
运动会主持人开幕词
2016/03/04 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书