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 相关文章推荐
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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
一些星际专用术语解释
2020/03/04 星际争霸
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
php树型类实例
2014/12/05 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
文员个人的求职信范文
2013/09/26 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
煤矿安全承诺书
2014/05/22 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书