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 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
jquery 插件学习(三)
Aug 06 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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正则获取页面所有图片地址
2016/03/23 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
python实现猜数字小游戏
2020/03/24 Python
Python实现图片添加文字
2019/11/26 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
Python之变量类型和if判断方式
2020/05/05 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
Python中的面向接口编程示例详解
2021/01/17 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
手机配件第一品牌:ZAGG
2017/05/28 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
xml有哪些解析技术?区别是什么
2016/04/26 面试题
小学国旗下的演讲稿
2014/08/28 职场文书