jQuery Validate 表單驗證

jopen 12年前發布 | 186K 次閱讀表單相關jQuery插件 jQuery插件 jQuery Validate

在做網頁表單時時常需要在客戶端對表單填寫的數據進行驗證一番才能提交，我們可以通過自己編寫JavasScript代碼來驗證，但是有時數據量過多時就會有些難度了。基于jQuery的jquery.validate驗證框架幫我們解決了困難，我們可以通過它迅速驗證一些常見的輸入,并且可以自己擴充自己的驗證方法，而且對國際化也有非常好的支持。

今天記錄的就是用此插件來實現表單驗證，效果圖：

1、獲取JS文件：http://jqueryvalidation.org/，這個插件的用法就不再多講了，如不熟悉或者還沒用過的可以通過官網了解也可以搜索jquery validate中文API，此文僅僅記錄如何實現上圖效果。

2、導入JS

<script src="test/jquery.js" type="text/javascript"></script>
<script src="test/jquery.validate.js" type="text/javascript"></script>

3、創建表單

<fieldset style="width:700px; margin:0 auto;">
    <legend>用戶注冊</legend>
    <form id="signupForm" method="get" action="">
        <p>
            <label for="firstname">用戶名：</label>
            <input id="firstname" name="firstname" type="text" />
            <span class="red">*</span>
        </p>
        <p>
            <label for="realname">真實名：</label>
            <input id="realname" name="realname" type="text" />
        </p>
        <p>
            <label for="password">密　碼：</label>
            <input id="password" name="password" type="password" />
            <span class="red">*</span>
        </p>
        <p>
            <label for="confirm_password">確　認：</label>
            <input id="confirm_password" name="confirm_password" type="password" />
            <span class="red">*</span>
        </p>
        <p>
            <label for="email">郵　箱：</label>
            <input id="email" name="email" type="text" />
            <span class="red">*</span>
        </p>
        <p>
            <label for="tel">電　話：</label>
            <input id="tel" name="tel" type="text" />
        </p>
        <p>
            <label for="address">地　址：</label>
            <input id="address" name="address" type="text" />
        </p>
        <p>
            <label for="idcard">證件號：</label>
            <input id="idcard" name="idcard" type="text" />
        </p>
        <p>
            <label for="degree">學　歷：</label>
            <select id="degree" name="degree">
                <option value="-1">請選擇</option>
                <option value="1">小學</option>
                <option value="2">中學</option>
                <option value="3">大專</option>
                <option value="4">本科</option>
                <option value="5">學士</option>
                <option value="6">碩士</option>
                <option value="7">博士</option>
            </select>
        </p>
        <p>
            <label for="sex">性　別：</label>
            <input type="radio" id="rdoFemale" name="sex" />男
            <input type="radio" id="rdoMale" name="sex" />女
            <input type="radio" id="rdoSecret" name="sex" />保密
        </p>
        <p>            
            <input id="read" name="read" type="checkbox" /><label for="read">同意相關條約</label>
        </p>
        <p>
            <input class="submit" type="submit" value="Register"/>
        </p>
    </form>
</fieldset>

4、表單初始化樣式

.red{ color:red;}
.submit{ width:80px;}
input{height:22px; padding:2px;}

5、驗證代碼

$(document).ready(function() {

    //設置默認屬性
    $.validator.setDefaults({       
        submitHandler: function(form) {    
            form.submit();    
       }
    }),

    //開始驗證
    $("#signupForm").validate({                       
        rules: {
            firstname: {
                required: true,
                stringCheck:true,   
                byteRangeLength:[4,15]
            },
            realname: {
                minlength:5
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            tel: {
                isMobile: true
            },
            address: {
                stringCheck:true,   
                byteRangeLength:[4,100]
            },
            read: {
                required:true
            },
            degree: {
                required:true,
                min:0
            },
            idcard: {
                required:true,
                isIdCardNo:true
            }   
        },
        //設置提示信息
        messages:{
            address:{
                stringCheck: "請正確輸入您的聯系地址",   
                byteRangeLength: "請詳實您的聯系地址以便于我們聯系您"
            },
            read:{
                required:"請先閱讀注冊條約"
            },
            degree:{
                min:"請選擇學歷"
            }
        },
        //設置錯誤信息存放標簽
        errorElement: "em",
        //指定錯誤信息位置
        errorPlacement: function (error, element) { 
            if (element.is(':radio') || element.is(':checkbox')) {
                var eid = element.attr('name');
                error.appendTo(element.parent());
            } else {
                error.appendTo(element.closest("p"));
            }
        },
        //設置驗證觸發事件
        focusInvalid: true,
        //設置驗證成功提示格式
        success:function(e)
        {
            e.html("&nbsp;").addClass("valid").text('ok');
        }
    })
});

到這里表單驗證功能就初步完成了，可以試著預覽一下效果，點擊按鈕提交你肯定發現不會進行驗證，因為在驗證中使用了一些自定義的方法，所以驗證失效，那么繼續讀下去吧，接下來是實現驗證的提示信息的個性化和自定義驗證方法。

6、我們可以知道validate默認的提示信息是英文的，我們可以編寫一個jquery.validate.message_cn.js文件來改變它的提示內容并讓提示內容顯示成中文的：

//定義中文消息
var cnmsg = {
    required: "必需填寫項",
    remote: "請修正該字段",
    email: "請輸入正確格式的電子郵件",
    url: "請輸入合法的網址",
    date: "請輸入合法的日期",
    dateISO: "請輸入合法的日期 (ISO).",
    number: "請輸入合法的數字",
    digits: "只能輸入整數",
    creditcard: "請輸入合法的信用卡號",
    equalTo: "請再次輸入相同的值",
    accept: "請輸入擁有合法后綴名的字符串",
    maxlength: jQuery.format("請輸入一個長度最多是 {0} 的字符串"),
    minlength: jQuery.format("請輸入一個長度最少是 {0} 的字符串"),
    rangelength: jQuery.format("請輸入一個長度介于 {0} 和 {1} 之間的字符串"),
    range: jQuery.format("請輸入一個介于 {0} 和 {1} 之間的值"), 
    max: jQuery.format("請輸入一個最大為 {0} 的值"),
    min: jQuery.format("請輸入一個最小為 {0} 的值"),

    //自定義驗證方法的提示信息
    stringCheck: "用戶名只能包括中文字、英文字母、數字和下劃線",   
    byteRangeLength: "用戶名必須在4-15個字符之間(一個中文字算2個字符)",
    isIdCardNo: "請正確輸入您的身份證號碼",
};
jQuery.extend(jQuery.validator.messages, cnmsg);

可以看到此文件中有一個自定義驗證方法的提示信息，這些驗證方法也是讓之前預覽沒有驗證效果的原兇哦，validate插件提供自定義驗證方法，繼續完善 jquery.validate.message_cn.js(自定義驗證方法來源于網絡) 文件：

// 字符驗證       
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] );       
}, "請確保輸入的值在4-15個字節之間(一個中文字算2個字節)");

// 身份證號碼驗證      
jQuery.validator.addMethod("isIdCardNo", function(value, element) {       
    return this.optional(element) || isIdCardNo(value);       
}, "請正確輸入您的身份證號碼");

/** 
 * 身份證號碼驗證
 */  
function isIdCardNo(num) {  

 var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);  
 var parityBit=new Array("1","0","X","9","8","7","6","5","4","3","2");  
 var varArray = new Array();  
 var intValue;  
 var lngProduct = 0;  
 var intCheckDigit;  
 var intStrLen = num.length;  
 var idNumber = num;  
   // initialize  
     if ((intStrLen != 15) && (intStrLen != 18)) {  
         return false;  
     }  
     // check and set value  
     for(i=0;i<intStrLen;i++) {  
         varArray[i] = idNumber.charAt(i);  
         if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) {  
             return false;  
         } else if (i < 17) {  
             varArray[i] = varArray[i] * factorArr[i];  
         }
     }

     if (intStrLen == 18) {
         //check date
         var date8 = idNumber.substring(6,14);
         if (isDate8(date8) == false) {
            return false;
         }
         // calculate the sum of the products  
         for(i=0;i<17;i++) {
             lngProduct = lngProduct + varArray[i];
         }
         // calculate the check digit
         intCheckDigit = parityBit[lngProduct % 11];
         // check last digit
         if (varArray[17] != intCheckDigit) {
             return false;
         }
     }
     else{   //length is 15
         //check date
         var date6 = idNumber.substring(6,12);
         if (isDate6(date6) == false) {
             return false;
         }
     }
     return true;
 }

在文件中導入jquery.validate.message_cn.js文件

<script src="test/jquery.validate.message_cn.js" type="text/javascript"></script>

到這里表單的驗證功能就做好了，現在預覽的效果應該是這樣的：

如果沒是這樣的效果那要好好看看是不是漏了哪一步呢？還有最后一步就是編寫驗證樣式來實現個性化驗證，那個正確（'√'）和錯誤（'×'）的提示是背景圖片，我們可以從網上找到自己中意的小圖標就行了，驗證樣式為：

/**
 *  @DO 校驗的樣式文件
 *  @DATE 2010-11-25
 *  @AUTHOR Frylan
 */
 /*錯誤樣式*/
input.error { border: 1px dashed red;background:yellow; padding:2px; }
select.error { border: 1px dashed red; background:yellow; padding:2px; }
.error {
    padding-left: 16px; 
    margin-left: 2px; 
    color:red; 
    /*背景圖片（校驗未通過的’×’圖標）*/
    background: url(unchecked.gif) no-repeat 0px 0px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
}
/*驗證通過樣式*/
input.valid{ background:#FFC; border:#09F solid 1px; padding:2px;}
select.valid{ background:#FFC; border:#09F solid 1px; padding:2px;}
.valid {
    padding-left: 16px; 
    margin-left: 2px;
    /*背景圖片(校驗通過的’√’圖標)*/
    background: url(checked.gif) no-repeat 0px 0px;
    font-family:Verdana, Geneva, sans-serif;
    color:#00F;
    font-size:11px;
}

當然這個只是我這個效果的樣式，表單和驗證樣式都可以根據自己的喜好來設置。這些都做完之后再次預覽就應該是文中開頭那個的效果圖片了。

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1372923690066.html

表單相關jQuery插件 jQuery插件 jQuery Validate

jQuery Validate 表單驗證

相關經驗

相關資訊

相關文檔

目錄