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中的Path与domain
Dec 18 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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错误日志 display_errors与log_errors的区别
2012/10/09 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
解析php入库和出库
2013/06/25 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
django实现分页的方法
2015/05/26 Python
python http接口自动化脚本详解
2018/01/02 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
介绍一下.net和Java的特点和区别
2012/09/26 面试题
研究生求职推荐信范文
2013/11/30 职场文书
建筑人员岗位职责
2013/12/25 职场文书
银行演讲稿范文
2014/01/03 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
电力培训心得体会
2014/09/02 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android