jquery validate校验

qq510219366

浏览: 59284 次
性别:
来自: 南京

最近访客更多访客>>

leimingchao

sxr412

影子yingzi

yourfriend0309

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<head>
<script src="/js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/js/jquery.validate.js" type="text/javascript"></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">
    // 添加验证方法 (身份证号码验证)
    jQuery.validator.addMethod("isIdCardNo", function(value, element) {
        return this.optional(element) || checkidcard(value);
    }, "请正确输入您的身份证号码");

    $().ready(function() {
        $("#secondform").validate({
            /*errorLabelContainer: "#messageBox",       //显示错误信息的容器ID
             wrapper: "li",                              //包含每个错误信息的容器*/
            submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form
                alert("提交表单");
                //form.submit();   提交表单
            },
            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: "身份证号不正确"
                }
            }
        });

    });
</script>
</head>
<div id="header"></div>
<div id="main">

    <form id="secondform">
        <fieldset>
            <legend>自定义jQuery验证</legend>
            <div id="xm" class="owinput">
                <div class="owlabel">
                    <label class="req" for="xm"> 姓  名 :</label>
                    <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>
                    <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>
                    <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>
                    <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>
                    <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>
                    <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>