该文档转载自 http://ideabean.javaeye.com/blog/363927

官方网站 http://bassistance.de/jquery-plugins/jquery-plugin-validation/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery表单验证例子</title>

<link type="text/css" rel="stylesheet" media="screen" href="style/cmxform.css" />

<link type="text/css" rel="stylesheet" media="screen" href="style/reg.css" />

<!--[if lte IE 6]>

<link type="text/css" rel="stylesheet" media="screen" href="style/ie.css" />

<![endif]-->  

<script type="text/javascript" src="script/jquery.js"></script>

<script type="text/javascript" src="script/jquery.validate.js" charset="gb2312"></script>

<script type="text/javascript" src="script/buttonstyle.js"></script>  

<script>

function checkidcard(num){

    var len = num.length, re;

    if (len == 15)

        re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);

    else if (len == 18)

        re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);

    else{

        //alert("请输入15或18位身份证号,您输入的是 "+len+ "位");

        return false;

    }

    var a = num.match(re);

    if (a != null){

        if (len==15){

            var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);

            var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];

        }else{

            var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);

            var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];

        }

        if (!B){

            //alert("输入的身份证号 "+ a[0] +" 里出生日期不对！");

            return false;

        }

    }  

    return true;

}

</script>  

<script type="text/javascript">

    $.validator.setDefaults({

        submitHandler: function() { alert("submitted!"); }

    });  

    // 添加验证方法 (身份证号码验证)

    jQuery.validator.addMethod("isIdCardNo", function(value, element) {

        return this.optional(element) || checkidcard(value);

    }, "请正确输入您的身份证号码");   

    $().ready(function() {

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

        $("#secondform").validate({

            /*errorLabelContainer: "#messageBox",       //显示错误信息的容器ID

            wrapper: "li",                              //包含每个错误信息的容器*/

            rules:{

                xm:{

                    required: true,

                    minlength: 2,

                    maxlength: 5

                },

                pwd:{

                    required: true,

                    minlength: 6

                },

                confirm_pwd:{

                    required: true,

                    equalTo: "#pwd"

                },

                f2csrq:{

                    required: true,

                    date: true

                },

                f2xjzd: {

                    required: true

                },

                f2sfzh:{

                    /*digits: true,

                    rangelength: [18,20]*/

                    required: true,

                    isIdCardNo: true

                }

            },

            messages:{

                xm:{

                    required: "请填写姓名",

                    minlength: "字符长度不能小于2个字符",

                    maxlength: "字符长度不能大于5个字符"

                },

                pwd:{

                    required: "请填写密码",

                    minlength: "字符长度不能小于6个字符"

                },

                confirm_pwd:{

                    required: "请再次输入密码",

                    equalTo: "密码不一致"

                },

                f2csrq:{

                    required: "请输入出生日期",

                    date: "日期格式不正确(例：2009/04/07)"

                },

                f2xjzd:{

                    required: "请输入地址"

                },

                f2sfzh:{

                    /*digits: "身份证号码只能为数字",

                    rangelength: "身份号码长度为18～20个字符"*/

                    required: "请输入身份证号",

                    isIdCardNo: "身份证号不正确"

                }

            }

        });  

        /*// 输入框获得焦点时，样式设置

        $('input').focus(function(){

            if($(this).is(":text") || $(this).is(":password"))

                $(this).addClass('focus');

            if ($(this).hasClass('have_tooltip')) {

                $(this).parent().parent().removeClass('field_normal').addClass('field_focus');

            }

        });     

        // 输入框失去焦点时，样式设置

        $('input').blur(function() {

            $(this).removeClass('focus');

            if ($(this).hasClass('have_tooltip')) {

                $(this).parent().parent().removeClass('field_focus').addClass('field_normal');

            }

        });*/

    });

</script>

</head>  

<body>

<div id="header"></div>

<div id="main">  

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

    <fieldset>

        <legend>jQuery验证</legend>

        <div id="xm" class="owinput">

            <div class="owlabel">

                <label class="req" for="xm"> 姓  名 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="xm" class="required" minlength="2"> </span>

            </div>

        </div>  

        <div id="xb" class="owinput">

            <div class="owlabel">

                <label class="req" for="f1pwd"> 密  码 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input id="f1pwd" name="f1pwd" class="required" minlength="6"> </span>

            </div>

        </div>  

        <div id="xb" class="owinput">

            <div class="owlabel">

                <label class="req" for="f1pwd2"> 密码确认 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input value="" name="f1pwd2" type="text" class="required" equalTo="#f1pwd"> </span>

            </div>

        </div>  

        <div id="csrq" class="owinput">

            <div class="owlabel">

                <label class="req" for="f1csrq"> 出生日期 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="f1csrq" type="text" class="required date"> </span>

            </div>

        </div>  

        <div id="xjzd" class="owinput">

            <div class="owlabel">

                <label class="req" for="f1xjzd"> 现居住地 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input  name="f1xjzd" type="text" class="required"> </span>

            </div>

        </div>  

        <div id="sfzh" class="owinput">

            <div class="owlabel">

                <label class="req" for="f1sfzh"> 身份证号 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="f1sfzh" type="text" class="required isIdCardNo" minlength="18" maxlength="19"> </span>

            </div>

        </div>

    </fieldset>  

    <div id="regSubmit">

        <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">

            <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提  交</button><b class="bl"><b class="br"></b></b>

        </span>

        <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">

            <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取  消</button><b class="bl"><b class="br"></b></b>

        </span>

    </div>

</form>  

<form id="secondform">

    <fieldset>

        <legend>自定义jQuery验证</legend>

        <div id="xm" class="owinput">

            <div class="owlabel">

                <label class="req" for="xm"> 姓  名 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="xm" type="text"> </span>

            </div>

        </div>  

        <div id="xb" class="owinput">

            <div class="owlabel">

                <label class="req" for="pwd"> 密  码 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input id="pwd" name="pwd" type="text"> </span>

            </div>

        </div>  

        <div id="xb" class="owinput">

            <div class="owlabel">

                <label class="req" for="confirm_pwd"> 密码确认 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="confirm_pwd" type="text"> </span>

            </div>

        </div>  

        <div id="csrq" class="owinput">

            <div class="owlabel">

                <label class="req" for="f2csrq"> 出生日期 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="f2csrq" type="text"> </span>

            </div>

        </div>  

        <div id="xjzd" class="owinput">

            <div class="owlabel">

                <label class="req" for="f2xjzd"> 现居住地 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input value="" name="f2xjzd" type="text"> </span>

            </div>

        </div>  

        <div id="sfzh" class="owinput">

            <div class="owlabel">

                <label class="req" for="f2sfzh"> 身份证号 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="f2sfzh" type="text"> </span>

            </div>

        </div>

    </fieldset>

    <div id="messageBox"></div> <!-- 此容器用于汇总显示错误信息 -->

    <div id="regSubmit">

        <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">

            <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提  交</button><b class="bl"><b class="br"></b></b>

        </span>

        <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">

            <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取  消</button><b class="bl"><b class="br"></b></b>

        </span>

    </div>

</form>

</div>

<div id="footer"></div>

</body>

</html>

文章来自：http://www.cnblogs.com/chenxizhang/archive/2010/01/24/1655311.html

jquery:validate的例子的更多相关文章

  1. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  2. jquery.validate不用submit而用js提交的例子

    $("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...

  3. jQuery Validate 验证，校验规则写在控件中的具体例子

    将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...

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

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

  5. ASP.NET MVC 5 Jquery Validate

    ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置 应用ValidationAttrib ...

  6. jquery.validate.js表单验证

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

  7. jquery validate表单验证插件

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

  8. jquery.validate使用 - 1

    jquery.validate使用攻略 好几年不写JS了,资料整理起来比较慢,格式也有点乱 主要分几部分jquery.validate 基本用法jquery.validate API说明jquery. ...

  9. ASP.NET MVC和WebForm 轻松实现前端和后端的双重验证 jquery.validate+ValidationSugar

    上次不足的改进 可能上一个贴子给大家带来很多误解,所以我这次把DEMO完善了两个版本 [ASP.NET WEBFROM]和[ ASP.NET MVC] 修改了一些BUG,并且修改了一些细了 在上个贴子 ...

随机推荐

  1. rabbitmq性能优化之Consumer utilisation

    如下所示,每个rabbitmq队列除了发布和消费吞吐量外,还有一个评价MQ队列效率的更加重要的指标Consumer utilisation ,如下: 在最佳利用率情况下,这个值能够达到100%,并且生 ...

  2. ipa如何通过网络进行安装

    苹果手机端应用,如果发布的到Appstore上,往往比较复杂,周期也比较长,Over-the-Air是Apple在 iOS4 中新加的一项技术,目的是让开发者能够脱离Appstore,实现从自己的服务 ...

  3. ArcGIS中国工具应用:固定比例尺固定纸张批量打印

    ArcGIS中国工具应用:固定比例尺固定纸张批量打印 下载地址:http://files.cnblogs.com/files/gisoracle/a3batchprint.zip 固定A3,比例尺1: ...

  4. iOS之2016面试题一

    序言 招聘高峰期来了,大家都非常积极地准备着跳槽,那么去一家公司面试就会有一堆新鲜的问题,可能不会,也可能会,但是了解不够深.本篇文章为群里的小伙伴们去宝库公司的笔试题,由笔者整理并提供笔者个人参考答 ...

  5. EntityFramework 数据库连接可用代码动态设定

    摘自:http://blog.csdn.net/dyllove98/article/details/9289553 数据库生成位置可控制(其实主要就是DbContext的构造函数) 1.使用DbCon ...

  6. TeamCity实战（1）：准备工作

    环境: Windows Server 2008 R2 SP1(不会再有SP2,参考这里:http://www.techspot.com/news/50599-microsoft-wont-releas ...

  7. 解决session阻塞的问题

    简介 对于数据库运维人员来说创建session或者查询时产生问题是常规情况,下面介绍一种很有效且不借助第三方工具的方式来解决类似问题. 最近开始接触运维工作,所以自己总结一些方案便于不懂数据库的同事解 ...

  8. 初探ansible安装

    一.ansible介绍常用的自动化运维工具 Puppet —基于 Ruby 开发,采用 C/S 架构,扩展性强,基于 SSL,远程命令执行相对较弱SaltStack —基于 Python 开发,采用 ...

  9. 【转】js 关键字 in 的使用方法

    js 关键字 in 的使用方法  原文地址:http://sunct.iteye.com/blog/1709017   1.For...In 声明用于对数组或者对象的属性进行循环/迭代操作. 对于数组 ...

  10. python2不同版本安装json模块

    1.常用json库主要有json-py和simplejson 1) json-py 包含json和minjson,用法一样 Python (#, Jan , ::) [GCC (Red Hat -)] ...