jquery:validate的例子{转载}

2021年09月15日 阅读数:3
这篇文章主要向大家介绍jquery:validate的例子{转载},主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

 

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

酷就一个字,我就说一次,嘿嘿css

 

<!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>