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 $.ajax各个事件执行顺序
Oct 15 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 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
如何让CI框架支持service层
2014/10/29 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Django模板语言 Tags使用详解
2019/09/09 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
图书室管理制度
2014/01/19 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
教师聘用意向书
2015/05/11 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
TV动画《间谍过家家》公开PV
2022/03/20 日漫
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL