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 style 中visibility和display之间的区别
Jan 22 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
vue完美实现el-table列宽自适应
May 08 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
超级简单的发送邮件程序
2006/10/09 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
python 生成器协程运算实例
2017/09/04 Python
python中字符串的操作方法大全
2018/06/03 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
python是怎么被发明的
2020/06/15 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
普通员工辞职信
2014/01/17 职场文书
大学生秋游活动方案
2014/02/17 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
就业导师推荐信范文
2015/03/27 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL