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组合使用时会有一些问题可以参考网友的博文。 
源码下载

时间: 2011-09-02

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">

jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件.它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器.通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择. 效果展示       源码下载 使用方法 使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css.jQuery和fm.selectator.jquery.js文件. <link rel="stylesheet"

jQuery插件cxSelect多级联动下拉菜单实例解析

随着电商的火爆,这多级联动下拉菜单体现的更加充分,最明显的就是地址的多级联动下拉选择,所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点需要学

Jquery多选下拉列表插件jquery multiselect功能介绍及使用

有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵! 先简单说说这个插件: jquery-multiselect 基于Jquery-ui的组件体系. 所以使用它的时候,先得导入jquery-ui相关的js和css哦 特性 •支持点击labe

jQuery扁平化风格下拉框美化插件FancySelect使用指南

FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用.在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件.如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它. 默认情况下,FancySelect 在 iOS 设备上仅使用原生

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> <

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的select下拉框选择触发事件实例分析

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

基于jquery实现省市区三级联动效果

本文实现更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们. JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 说明:数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"&g

基于jQuery下拉选择框插件支持单选多选功能代码

由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表 具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu

基于jQuery实现的QQ表情插件

不废话了,先给大家展示效果图: 查看演示 下载源码 我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中. HTML 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件. <script type="text/javascript" src="j

基于jQuery实现select下拉选择可输入附源码下载

我们知道,一般select下拉框是只能选择的,不能用来输入内容的.而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,我们可以让select变成text,允许用户输入想要的内容,同时还可以在输入的时候将包含关键字的项也列出来,供快速选择. 查看演示效果           源码下载 本文将用实例和大家分享一款基于jQuery的下拉框插件,它允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果.我们来看下如何使用.

基于jQuery的弹出消息插件 DivAlert之旅(一)

想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来瞧瞧,了解了jQuery插件的基本格式,理一下基本的思路,动工吧... 这个DivAlert插件,顾名思义就是页面弹出框,也就相当于Winform里面MessageBox.Show()那样的东西. 首先,我们来定义一下一些最基本的参数: 插件初始化 复制代码 代码如下: (function($) {

基于jquery二维码生成插件qrcode

本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js">&

基于jquery的15款幻灯片插件

1,Gallerific Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果,包括缩略图.图片标题和描述等详细功能,是一个非常不错的高质量画廊相册展示工具. 2,ZoomImage zoomimage ,以一种独具魅力的方式展示图片效果.缩略图链接在本页弹出大图,并且可以可以随意拖拽该悬浮图片. 3,EasySlider Easy Slider 可以实现图片或其他任意内容,在水平或垂直方向上的滑动效果,你还可以通过 CSS 自定义

基于jQuery图片平滑连续滚动插件

* 此插件要求运行在jQuery v1.3 或更高版本上 * 插件可以实现图片平滑向上或向左滚动 * 如果您需要更多的效果或在使用中本插件存在BUG,可以给在彦磊的博客上留言,彦磊将尽自己最大努力完善此插件 * 您留言前请先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件 * 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果 * 彦磊图片平滑滚动插件只是对jcarousellite插件的补充 * * * 技术