该文档转载自 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. 提交留言HTML模板代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. 【小贴士】关于transitionEnd/animate的一个有趣故事

    前言 在很久之前,我们项目有一个动画功能,功能本身很简单,便是典型的右进左出,并且带动画功能 以当时来说,虽然很简单,但是受限于框架本身的难度,就直接使用了CSS3的方式完成了功能 当时主要使用tra ...

  3. golang官网可以打开了 go语言

    golang.org之前国内一直打不开,今天看了一下居然可以打开了,除了页面上youtube的视频加载不了.页面自动识别中文. 再也不用为下载go的源码发愁了.http://www.cnblogs.c ...

  4. request.getParameter(“参数名”) 中文乱码解决方法

    今天浏览项目时候,遇到一个问题,页面用${requestScope.参数名 }获取的值是乱码,然后搜了一下,最后说是编码的问题,附上查找的结果: 在Java 开发中,如果框架搭建的不完善或者初学者在学 ...

  5. Linux入侵检测常用命令

    find / -mtime 0 #0代表目前时间,表示从现在开始到24小时以前,有改动过内容的文件全都会被列出来.如果是3天前24小时内,则使用find / -mtime 3 find /etc -n ...

  6. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q139-Q141)

    Question 139You create a SharePoint solution that contains two Features named Feature1 and Feature2. ...

  7. IOS开发基础知识--碎片33

    1:AFNetworking状态栏网络请求效果 直接在AppDelegate里面didFinishLaunchingWithOptions进行设置 [[AFNetworkActivityIndicat ...

  8. 深度技术GHOST WIN7系统32.64位j极速安装版 V2016年

    系统来自系统妈:http://www.xitongma.com 深度技术GHOST win7系统64位j极速安装版 V2016年3月 系统概述 深度技术ghost win7系统64位j极速安装版  版 ...

  9. 【代码笔记】iOS-替换电话号码中间4位为-号

    一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...

  10. 【产品 & 设计】入门 - 工具篇 - Sketch + Skala Preview

    前言 做产品和设计快 1 年了,积累了一点经验分享一下 —— 抛砖引玉,欢迎交流. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: ht ...