jquery:validate的例子

时间：2022-10-17 19:57:35

该文档转载自 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

相关文章