这里，我们再说说radio、checkbox、select的验证方式。

1、用新版的写法进行验证。

<!DOCTYPE html>

<html>

<head>

<script src="js/jquery.js"></script>

<script src="js/jquery.validate.js"></script>

<script>

    $().ready(function() {

        $("#registerForm").validate();

    });

</script>

<style>

#registerForm label.error {

    margin-left: 10px;

    color: red;

}

</style>

</head>

<body>

    <form id="registerForm" method="get" action="">

        <fieldset>

            <!-- radio的验证  -->

            性别 <span><br/>

            男<input type="radio" id="gender_male" value="m" name="gender" required="true" data-msg-required="性别不能为空"/><br />

            女<input type="radio" id="gender_female" value="f" name="gender" />

            </span>

            <!-- checkbox的验证 -->

            <br/>最少选择两项 <span><br />

                选项1<input type="checkbox" id="check_1" value="1" name="checkGroup" required="true" data-msg-required="必须选择" minlength=2 data-msg-minlength="至少选择2项"/><br />

                选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />

                选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />

            </span>

            <!-- select的验证 -->

            <br/>下拉框 <span><br />

                <select id="selectbox" name="selectbox" required="true" data-msg-required="必须选择">

                    <option value=""></option>

                    <option value="1">1</option>

                    <option value="2">2</option>

                    <option value="3">3</option>

                </select>

            </span>

            <p>

                <input type="submit" value="提交">

            </p>

        </fieldset>

    </form>

</body>

</html>

jv4-1.html

这种写法要注意一点，对于同一组的标签加验证规则，只能加在第一个标签里。例如性别那个标签组，规则  required="true" data-msg-required="性别不能为空"  只能放在第一个type等于radio的input里(也就是男后面的那个input)，如果把验证规则放在后一个标签是无法正常验证的。

2、通过JavaScript自定义规则

<!DOCTYPE html>

<html>

<head>

<script src="js/jquery.js"></script>

<script src="js/jquery.validate.js"></script>

<script>

    $().ready(function() {

        $("#registerForm").validate({

            rules : {

                gender : {

                    required : true

                },

                checkGroup : {

                    required : true,

                    minlength:2

                },

                selectbox : {

                    required : true

                }

            },

            messages : {

                gender : {

                    required : '性别不能为空'

                },

                checkGroup : {

                    required : '必须选择',

                    minlength:'至少选择{0}项'

                },

                selectbox : {

                    required : '必须选择'

                }

            }

        });

    });

</script>

<style>

#registerForm label.error {

    margin-left: 10px;

    color: red;

}

</style>

</head>

<body>

    <form id="registerForm" method="get" action="">

        <fieldset>

            <!-- radio的验证  -->

            性别 <span><br/>

            男<input type="radio" id="gender_male" value="m" name="gender"/><br />

            女<input type="radio" id="gender_female" value="f" name="gender" />

            </span>

            <!-- checkbox的验证 -->

            <br/>最少选择两项 <span><br />

                选项1<input type="checkbox" id="check_1" value="1" name="checkGroup" /><br />

                选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />

                选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />

            </span>

            <!-- select的验证 -->

            <br/>下拉框 <span><br />

                <select id="selectbox" name="selectbox">

                    <option value=""></option>

                    <option value="1">1</option>

                    <option value="2">2</option>

                    <option value="3">3</option>

                </select>

            </span>

            <p>

                <input type="submit" value="提交">

            </p>

        </fieldset>

    </form>

</body>

</html>

jv4-2.html

在前面，我提到过自定义规则里rules和messages里的key用的是标签的name属性值，当时我也疑惑，为什么不直接用ID。刚才的代码，已经说明了原因。如果用的是ID，那么对于radio、checkbox这种通过name属性的值进行分组的标签，那可就没法进行验证了。

当然，如果你想让验证规则可以重用，那你也可以把它单独抽取出来，保存在一个JS文件里，然后在需要的页面引入。

接下来，说说提示语句的位置问题吧，也许你不想让提示语句显示在那个位置，那么没关系。

提示语句的位置是允许我们自定义的，十分的灵活。

<!DOCTYPE html>

<html>

<head>

<script src="js/jquery.js"></script>

<script src="js/jquery.validate.js"></script>

<script>

    $().ready(function() {

        $("#registerForm").validate({

            rules : {

                gender : {

                    required : true

                },

                checkGroup : {

                    required : true,

                    minlength:2

                },

                selectbox : {

                    required : true

                }

            },

            messages : {

                gender : {

                    required : '性别不能为空'

                },

                checkGroup : {

                    required : '必须选择',

                    minlength:'至少选择{0}项'

                },

                selectbox : {

                    required : '必须选择'

                }

            },

            errorPlacement: function(error, element) {

                if ( element.is("input[type=radio][name='gender']") )//通过选择器来判断

                error.appendTo($("#eradio")); //通过选择器来查找指定元素

                else if ( element.is(":checkbox") ) //这里有各种各样的查找方式，只要是满足语法的，都可以。

                error.appendTo ( $("#echeckbox")); //完全可以满足你的任意位置的需求。

                else

                error.appendTo( $("#eother"));

                }

        });

    });

</script>

<style>

#registerForm label.error {

    margin-left: 10px;

    color: red;

}

</style>

</head>

<body>

    <form id="registerForm" method="get" action="">

        <label id="eradio">单选提示信息：</label><br/>

        <label id="echeckbox">多选提示信息：</label><br/>

        <label id="eother">其他提示信息：</label><br/>

        <fieldset>

            <!-- radio的验证  -->

            性别 <span><br/>

            男<input type="radio" id="gender_male" value="m" name="gender"/><br />

            女<input type="radio" id="gender_female" value="f" name="gender" />

            </span>

            <!-- checkbox的验证 -->

            <br/>最少选择两项 <span><br />

                选项1<input type="checkbox" id="check_1" value="1" name="checkGroup" /><br />

                选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />

                选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />

            </span>

            <!-- select的验证 -->

            <br/>下拉框 <span><br />

                <select id="selectbox" name="selectbox">

                    <option value=""></option>

                    <option value="1">1</option>

                    <option value="2">2</option>

                    <option value="3">3</option>

                </select>

            </span>

            <p>

                <input type="submit" value="提交">

            </p>

        </fieldset>

    </form>

</body>

</html>

jv4-3.html

对于提示语句的位置，就不说太多了，因为一般使用默认的位置也就行了。

只要你善用选择器，那个位置真的是任意定。

jQuery Validate(三)的更多相关文章

  1. jquery.validate+jquery.form提交的三种方式

    原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...

  2. jQuery Validate 表单验证 — 用户注册简单应用

    相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...

  3. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  4. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  5. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  6. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  7. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  8. jquery.validate.js插件使用

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  9. jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

随机推荐

  1. 【HDOJ5514】Frogs（容斥原理）

    题意:n个青蛙在一个有m个节点的圆上跳,m个节点的标号为0-m-1,每只青蛙每次跳的节点数给出,让求n只青蛙所跳位置标号之和 n<=1e4,m<=1e9,a[i]<=1e9 思路:由 ...

  2. javascript实现可拖动DIV层

    原文发布时间为:2009-05-04 -- 来源于本人的百度文章 [由搬家工具导入] 注意以下红色部分是关键.如果不使用      document.documentElement,而使用docume ...

  3. C#获取二维数组的行数和列数及其多维。。。

    原文发布时间为:2008-11-26 -- 来源于本人的百度文章 [由搬家工具导入] 有一个二维数组sz[,] 怎样获取sz 的行数和列数呢？ sz.GetLength(0) 返回第一维的长度（即行数 ...

  4. t4 template multi file output

    1.Manager.ttinclude <#@ assembly name="System.Core"#> <#@ assembly name="Sys ...

  5. Scrapy学习-23-分布式爬虫

    scrapy-redis分布式爬虫 分布式需要解决的问题 request队列集中管理 去重集中管理 存储管理   使用scrapy-redis实现分布式爬虫 github开源项目: https://g ...

  6. SQL存储过程基础

    什么是存储过程呢?存储过程就是作为可执行对象存放在数据库中的一个或多个SQL命令. 通俗来讲:存储过程其实就是能完成一定操作的一组SQL语句. 那为什么要用存储过程呢?1.存储过程只在创造时进行编译, ...

  7. AC日记——文艺平衡树 洛谷 P3391

    文艺平衡树 思路: splay翻转操作模板: 虚拟最左最右端点,然后每次都把l翻转到root,r+2翻转到root的右节点: 然后在r+2的左节点上打标记: 标记需要在旋转,rank,print时下放 ...

  8. HDU 1025 Constructing Roads In JGShining's Kingdom[动态规划/nlogn求最长非递减子序列]

    Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  9. Codeforces 583 DIV2 Asphalting Roads 模拟

    原题链接:http://codeforces.com/problemset/problem/583/A 题意: 很迷很迷,表示没看懂..但是你看样例就秒懂了 题解: 照着样例模拟就好 代码: #inc ...

  10. 2016集训测试赛（二十四）Problem B: Prz

    Solution 这道题有两个关键点: 如何找到以原串某一个位置为结尾的某个子序列的最晚出现位置 如何找到原串中某个位置之前的所有数字的最晚出现位置中的最大值 第一个关键点: 我们注意到每个数字在\( ...