JQuery扩展插件Validate—6 radio、checkbox、select的验证


Posted in Javascript onSeptember 05, 2011

效果如下所示:

JQuery扩展插件Validate—6 radio、checkbox、select的验证
解决这个问题的办法是将错误信息指定到一个特定的位置,validate()方法的参数中可以进行自定义,示例代码如下:

<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); //测试是否匹配 
}, 
"格式错误"); 
$(function() { 
$("#signupForm").validate( 
{ 
rules: { 
txtPassword1: "required", //密码1必填 
txtPassword2: { //密码2的描述多于1项使用对象类型 
required: true, //必填,这里可以是一个匿名方法 
equalTo: "#txtPassword1", //必须与密码1相等 
rangelength: [5, 10], //长度5-10之间 
regex: "^\\w+$" //使用自定义的验证规则 
}, 
txtEmail: "email", //电子邮箱必须合法 
sex: "required" 
}, 
messages: { //对应上面的错误信息 
txtPassword1: "您必须填写", 
txtPassword2: { 
required: "您必须填写", 
equalTo: "密码不一致", 
rangelength: "长度必须介于{0} 和 {1} 之间的字符串", 
regex: "密码只能是数字、字母与下划线" 
} 
}, 



 
//在上例中新增的部分 
errorPlacement: function(error, element) { //指定错误信息位置 
if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox 
var eid = element.attr('name'); //获取元素的name属性 
error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面 
} else { 
error.insertAfter(element); 
} 
}, 
debug: false, //如果修改为true则表单不会提交 
submitHandler: function() { 
alert("开始提交了"); 
} 
}); 
}); 
</script> <p> 
<label for="sex"> 
性别</label> 
<input type="radio" id="rdoFemale" name="sex" />男 
<input type="radio" id="rdoMale" name="sex" />女 
</p>

运行结果如下:

JQuery扩展插件Validate—6 radio、checkbox、select的验证

此外:如果在参数中加上debug:true则只用于调试表单不会提交到服务器; submitHandler: function() {}将会在表单提交到服务器前执行一些操作;用remote可以进行Ajax验证,好像有个小bug;在使用ASP.NET与validate组合使用时会有一些问题可以参考网友的博文。 
源码下载 

Javascript 相关文章推荐
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 #Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 #Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 #Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 #Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 #Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 #Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 #Javascript
You might like
用cookies来跟踪识别用户
2006/10/09 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python的组合模式与责任链模式编程示例
2016/02/02 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python批量解压zip文件的方法
2019/08/20 Python
Python程序控制语句用法实例分析
2020/01/14 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
详解python UDP 编程
2020/08/24 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
党校学习自我鉴定
2014/02/24 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
英语教师求职信范文
2015/03/20 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang