该文档转载自 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. JAVA中常说的三大框架指：SSH

    即:spring.Struts.hibernate Spring:功能强大的组件粘合济,能够将你的所有的Java功能模块用配置文件的方式组合起来(还让你感觉不到spring的存在)成为一个完成的应用 ...

  2. 解决JqueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug

    前些日子不是在做 使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug.今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题. 首先先上图描 ...

  3. iOS之清除缓存

    //清除缓存按钮的点击事件 - (void)putBufferBtnClicked:(UIButton *)btn{ CGFloat size = [self folderSizeAtPath:NSS ...

  4. $是对string.Format的简化

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. Reporting Service 告警"w WARN: Thread pool pressure. Using current thread for a work item"

    如果Reporting Service偶尔出现不可访问或访问出错情况,这种情况一般没有做监控的话,很难捕捉到.出现这种问题,最好检查Reporting Service的日志文件. 今天早上就遇到这样一 ...

  6. .NET应用架构设计—用户端的防腐层作用及设计

    阅读目录: 1.背景介绍 2.SOA架构下的显示端架构腐化 3.有效使用防腐层来隔离碎片服务导致显示端逻辑腐烂 4.剥离服务调用的技术组件让其依赖接口 5.将服务的DTO与显示端的ViewModel之 ...

  7. MongoDB学习笔记~ObjectId主键的设计

    回到目录 说一些关于ObjectId的事 MongoDB确实是最像关系型数据库的NoSQL,这在它主键设计上可以体现的出来,它并没有采用自动增长主键,因为在分布式服务器之间做数据同步很麻烦,而是采用了 ...

  8. MongoDB学习笔记~索引提高查询效率

    回到目录 索引这个东西大家不会陌生,只要接触到稍微大一点的数据,都会用到这东西,它可以提升查询的速度,相当代价就是占用了更多的存储空间,这也是正常的,符合“能量守恒定理”,哈哈!今天说的是MongoD ...

  9. 利用 spring bean 的属性 init-method 解决因为数据库连接没有初始化而导致首次点击页面超慢的问题

    问题的描述: 一个项目,涉及到了 两个数据源,分别使用的是 两个不同的 数据库连接池,其中一个是 poxool 连接池,问题在于,spring在启动时,只初始化其中的一个 数据库连接池中的数据库连接, ...

  10. Echarts 之三 —— 地市联动数据统计二

    一.简介 除了是一个地图之外,我们也可以使用多地图进行地市.区县联动数据统计.需求如下:展示整改广东省的地图,并显示统计信息,当点击某一个地市的时候,就显示该地市的地图,并统计该地市区县的数据信息.二 ...