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

 更新时间:2011年09月05日 21:53:43   作者:  
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>

运行结果如下:

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

相关文章

  • 浅谈jquery.fn.extend与jquery.extend区别

    浅谈jquery.fn.extend与jquery.extend区别

    本文给大家简单描述了下jquery.fn.extend与jquery.extend的概念以及区别,十分的实用,有需要的小伙伴可以参考下。
    2015-07-07
  • asp.net 30分钟掌握无刷新 Repeater

    asp.net 30分钟掌握无刷新 Repeater

    经过数个版本的迭代后, JQueryElement 3.3.0 版本中的 Repeater 基本上已经完善, 这里将分功能的总结讲解一下 Repeater 的使用方法.
    2011-09-09
  • jQuery仿京东商城楼梯式导航定位菜单

    jQuery仿京东商城楼梯式导航定位菜单

    这篇文章主要介绍了jQuery仿京东商城楼梯式导航定位菜单的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 动态设置form表单的action属性的值的简单方法

    动态设置form表单的action属性的值的简单方法

    下面小编就为大家带来一篇动态设置form表单的action属性的值的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery实现锚点scoll效果实例分析

    jQuery实现锚点scoll效果实例分析

    这篇文章主要介绍了jQuery实现锚点scoll效果,实例分析了锚点scoll效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jquery插件之文字间歇自动向上滚动效果代码

    jquery插件之文字间歇自动向上滚动效果代码

    这篇文章主要介绍了jquery插件之文字间歇自动向上滚动效果代码,涉及jquery基于时间函数定时触发页面元素变换实现滚动效果的相关技巧,需要的朋友可以参考下
    2016-02-02
  • Jquery api 速查表分享

    Jquery api 速查表分享

    这篇文章主要给大家分享了一些Jquery api 速查表,十分的全面,这里推荐给大家,需要的朋友可以参考下
    2015-01-01
  • 浅析Jquery操作select

    浅析Jquery操作select

    本文主要介绍了Jquery如何操作select,并对此做了详细的注释,具有很好的参考价值,需要的朋友可以看看
    2016-12-12
  • JQuery中使用on方法绑定hover事件实例

    JQuery中使用on方法绑定hover事件实例

    这篇文章主要介绍了JQuery中使用on方法绑定hover事件实例,本文用于一些特殊环境下,需要的朋友可以参考下
    2014-12-12
  • jQuery实现弹幕效果

    jQuery实现弹幕效果

    本文主要分享了jQuery实现弹幕效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论