JQuery 驗證框架

 

設計完美,可擴展性好,之後就用他了.

http://docs.jquery.com/Plugins/Validation

/**//**    
 * @author ming    
 */      
$(document).ready(function(){           
             
/**//* 設置默認屬性 */           
$.validator.setDefaults({           
    submitHandler: function(form) {        
        form.submit();        
    }           
});       
      
// 字符驗證           
jQuery.validator.addMethod("stringCheck", function(value, element) {           
    return this.optional(element) || /^[/u0391-/uFFE5/w]+$/.test(value);           
}, "只能包括中文字、英文字母、數字和下劃線");       
      
// 中文字兩個字節           
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {           
    var length = value.length;           
    for(var i = 0; i < value.length; i++){           
        if(value.charCodeAt(i) > 127){           
        length++;           
        }           
    }           
    return this.optional(element) || ( length >= param[0] && length <= param[1] );           
}, "請確保輸入的值在3-15個字節之間(一箇中文字算2個字節)");       
      
// 身份證號碼驗證           
jQuery.validator.addMethod("isIdCardNo", function(value, element) {           
    return this.optional(element) || isIdCardNo(value);           
}, "請正確輸入您的身份證號碼");        
         
// 手機號碼驗證           
jQuery.validator.addMethod("isMobile", function(value, element) {           
    var length = value.length;       
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/;       
    return this.optional(element) || (length == 11 && mobile.test(value));           
}, "請正確填寫您的手機號碼");           
         
// 電話號碼驗證           
jQuery.validator.addMethod("isTel", function(value, element) {           
    var tel = /^/d{3,4}-?/d{7,9}$/;    //電話號碼格式010-12345678       
    return this.optional(element) || (tel.test(value));           
}, "請正確填寫您的電話號碼");       
      
// 聯繫電話(手機/電話皆可)驗證       
jQuery.validator.addMethod("isPhone", function(value,element) {       
    var length = value.length;       
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/;       
    var tel = /^/d{3,4}-?/d{7,9}$/;       
    return this.optional(element) || (tel.test(value) || mobile.test(value));       
      
}, "請正確填寫您的聯繫電話");       
         
// 郵政編碼驗證           
jQuery.validator.addMethod("isZipCode", function(value, element) {           
    var tel = /^[0-9]{6}$/;           
    return this.optional(element) || (tel.test(value));           
}, "請正確填寫您的郵政編碼");        
      
//開始驗證       
$('#submitForm').validate({       
    /**//* 設置驗證規則 */      
    rules: {       
        username: {       
            required:true,       
            stringCheck:true,       
            byteRangeLength:[3,15]       
        },       
        email:{       
            required:true,       
            email:true      
        },       
        phone:{       
            required:true,       
            isPhone:true      
        },       
        address:{       
            required:true,       
            stringCheck:true,       
            byteRangeLength:[3,100]       
        }       
    },       
           
    /**//* 設置錯誤信息 */      
    messages: {       
        username: {           
            required: "請填寫用戶名",       
            stringCheck: "用戶名只能包括中文字、英文字母、數字和下劃線",       
            byteRangeLength: "用戶名必須在3-15個字符之間(一箇中文字算2個字符)"           
        },       
        email:{       
            required: "請輸入一個Email地址",       
            email: "請輸入一個有效的Email地址"      
        },       
        phone:{       
            required: "請輸入您的聯繫電話",       
            isPhone: "請輸入一個有效的聯繫電話"      
        },       
        address:{       
            required: "請輸入您的聯繫地址",       
            stringCheck: "請正確輸入您的聯繫地址",       
            byteRangeLength: "請詳實您的聯繫地址以便於咱們聯繫您"      
        }       
    },       
           
    /**//* 設置驗證觸發事件 */      
    focusInvalid: false,       
    onkeyup: false,       
           
    /**//* 設置錯誤信息提示DOM */      
    errorPlacement: function(error, element) {           
        error.appendTo( element.parent());           
    },         
           
});       
      
});    
 

test.html

[xhtml] view plain copy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"       
"http://www.w3.org/TR/html4/loose.dtd">      
<html xmlns="http://www.w3.org/1999/xhtml">      
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />      
        <title>jQuery驗證</title>      
        <mce:script src="lib/jquery/jquery-1.3.2.min.js" mce_src="lib/jquery/jquery-1.3.2.min.js" ></mce:script>      
        <mce:script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></mce:script>      
        <mce:script type="text/javascript" src="lib/jquery/messages_cn.js" mce_src="lib/jquery/messages_cn.js"></mce:script>      
        <mce:script type="text/javascript" src="lib/jquery/formValidatorClass.js" mce_src="lib/jquery/formValidatorClass.js"></mce:script>      
        <mce:style type="text/css"><!--  
    
    
        * {}{        
            font-family: Verdana;        
            font-size: 96%;        
        }       
        label {}{        
            width: 10em;        
            float: left;        
        }       
        label.error {}{        
            float: none;        
            color: red;        
            padding-left: .5em;        
            vertical-align: top;        
        }       
        p {}{        
            clear: both;        
        }       
        .submit {}{        
            margin-left: 12em;        
        }       
        em {}{        
            font-weight: bold;        
            padding-right: 1em;        
            vertical-align: top;        
        }       
               
--></mce:style><style type="text/css" mce_bogus="1">    
    
        * {}{        
            font-family: Verdana;        
            font-size: 96%;        
        }       
        label {}{        
            width: 10em;        
            float: left;        
        }       
        label.error {}{        
            float: none;        
            color: red;        
            padding-left: .5em;        
            vertical-align: top;        
        }       
        p {}{        
            clear: both;        
        }       
        .submit {}{        
            margin-left: 12em;        
        }       
        em {}{        
            font-weight: bold;        
            padding-right: 1em;        
            vertical-align: top;        
        }       
             </style>    
    </head>      
    <body>      
        <form class="submitForm" id="submitForm" method="get" action="">      
         <fieldset>      
           <legend>表單驗證</legend>      
           <p>      
             <label for="username">用戶名</label>      
             <em>*</em><input id="userName" name="username" size="25" />      
           </p>      
           <p>      
             <label for="email">E-Mail</label>      
             <em>*</em><input id="email" name="email" size="25" />      
           </p>      
           <p>      
             <label for="phone">聯繫電話</label>      
             <em>*</em><input id="phone" name="phone" size="25" value="" />      
           </p>      
           <p>      
             <label for="address">地址</label>      
             <em>*</em><input id="address" name="address" size="22">      
           </p>      
             <input class="submit" type="submit" value="提交"/>      
           </p>      
          </fieldset>      
         </form>      
    </body>      
</html>   

JQuery驗證框架