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>
运行结果如下：
此外：如果在参数中加上debug:true则只用于调试表单不会提交到服务器; submitHandler: function() {}将会在表单提交到服务器前执行一些操作;用remote可以进行Ajax验证,好像有个小bug;在使用ASP.NET与validate组合使用时会有一些问题可以参考网友的博文。
源码下载
相关推荐
-
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件.它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器.通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择. 效果展示 源码下载 使用方法 使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css.jQuery和fm.selectator.jquery.js文件. <link rel="stylesheet"
-
Jquery插件之打造自定义的select标签
首先看下效果 复制代码 代码如下: <head> <title></title> <link type="text/css" rel="Stylesheet" href="JQSelect.css" /> <script type="text/javascript" src="jquery-1.2.6.js"></script> <
-
jQuery插件cxSelect多级联动下拉菜单实例解析
随着电商的火爆,这多级联动下拉菜单体现的更加充分,最明显的就是地址的多级联动下拉选择,所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点需要学
-
jQuery扁平化风格下拉框美化插件FancySelect使用指南
FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用.在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件.如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它. 默认情况下,FancySelect 在 iOS 设备上仅使用原生
-
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵! 先简单说说这个插件: jquery-multiselect 基于Jquery-ui的组件体系. 所以使用它的时候,先得导入jquery-ui相关的js和css哦 特性 •支持点击labe
-
jquery select插件异步实时搜索实例代码
一.先看看效果. 二.做此插件的原因. 1.数据量过大(几千.几万条),无法一次性全部加载. 2.现有插件各不相同,无法满足功能需求. 3.美观性,可控性不足. 三.如何使用. 1.html和js <select id="unit"></select> <script type="text/javascript" src="/demo/thirdparty/jquery/jquery-1.8.3.min.js">
-
lyhucSelect基于Jquery的Select数据联动插件
数据源: 复制代码 代码如下: var areaInfo = new Array(); areaInfo[0] = new Array(); areaInfo[0][0]="1"; areaInfo[0][1]="Beijing"; areaInfo[0][2]="0"; areaInfo[0][3]="0"; areaInfo[1] = new Array(); areaInfo[1][0]="2"; a
-
JQuery扩展插件Validate—6 radio、checkbox、select的验证
效果如下所示: 解决这个问题的办法是将错误信息指定到一个特定的位置,validate()方法的参数中可以进行自定义,示例代码如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法, //验证
-
JQuery扩展插件Validate 5添加自定义验证方法
示例如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数) var exp = new RegExp(params); //实例化正则对象,参数为传
-
JQuery扩展插件Validate 3通过参数设置错误信息
最终显示在页面上的错误分为两种:第一种是默认错误信息,该信息已经被定义在插件中了,可以手动修改. 第二种是通过参数指定的错误信息,如果没有指定则会使用默认的错误信息.将上个示例的js修改如下: 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#signupForm").validate( //在上例中新增的部分 { rules: { txtPassword1: "requ
-
JQuery扩展插件Validate 1 基本使用方法并打包下载
分别是: <script src="../Contents/JS/jquery-1.5.js" type="text/javascript"></script> <script src="../Contents/JS/jquery.validate.min.js" type="text/javascript"></script> 1.基本使用方法,通过样式设置验证规则 复制代码
-
JQuery扩展插件Validate 2通过参数设置验证规则
代码如下: 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#signupForm").validate( //在上例中新增的部分 { rules: { txtPassword1: "required", //密码1必填 txtPassword2: { //密码2的描述多于1项使用对象类型 required: true, //必填,这里可以是一个匿名方法 equ
-
JQuery扩展插件Validate—4设置错误提示的样式
我们先来使用firebug查看在前面的示例中JS产生的html错误提示: 从图中我们发现错误信息是被放在了一个label标签中,且有一个类样式error,只要为signupform下面的label标签中的error定css样式,应该就可以修改显示结果了,添加的css代码如下: 复制代码 代码如下: <style type="text/css"> * { font-size: 14px; } #signupForm label.error { color:Red; font-
-
Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#s
-
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二个元素为当前选中值 $('#selec
-
jquery text,radio,checkbox,select操作实现代码
控制表单元素: 文本框,文本区域: $("#txt").attr("value")或者$("#txt").val()//获取值 $("#txt").attr("value",'');//清空内容 $("#txt").attr("value",'11');//填充内容 多选框checkbox: $("#checkbox_id").attr("
-
jQuery验证插件validate使用方法详解
1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页