修改jquery-validation讓你的驗證提示更漂亮

jquery-validation驗證功能強大，在這裡就不多說了。只是他的提示沒有那麼漂亮，有沒有辦法改變他的提示方式呢？官方好像也有修改的方法，懶得看了，文檔都是英文的 ^_^!英文不好呀。其實還是想本地化一下，原版的是英文的提示，順便把提示也改成中文的，再加上一些常用的驗證方法，以後就不再需要addMethod了，豐富一下驗證方法。不多說了直接修改吧。我們要修改成哪樣子呢？來幾張圖片吧。

 

這是原來的提示方式。

 

 

修改後的提示方式

原版只有三種狀態，沒驗證之前，驗證錯誤，驗證成功。

修改後的狀態，未驗證之前，獲得焦點，驗證錯誤，驗證成功，並且狀態會保持著。

先用Notepad++開啟原版js，為什麼用Notepad++開啟？Notepad++可以摺疊方法塊，方便尋找。

要實現這樣的功能，必須有四個class，原版的已經有error和valid，我們再加上兩個normal和focus分別為未驗證之前和擷取焦點的class。

這裡我們在199行加上如下的代碼

[javascript] 
errorClass: "error", 
validClass: "valid", 
normalClass: "normal", 
focusClass: "focus", 
signClass: "tip",//有這個class表示是提示標籤 
頁面上我們只需要這樣寫(當然要寫在form中)
[html] 
<input id="UserName" name="UserName" class="required" type="text" value="" /> 
<label for="UserName" class="tip normal" tip="請輸入使用者名稱"></label> 
接下來我們依次修改 獲得焦點的事件onfocusin，失去焦時間點事件onfocusout，按鍵起來的事件onkeyup，看名字可以看得出來的。代碼就在剛剛修改的那裡下來一點。

修改後的

[javascript] 
onfocusin: function (element, event) { 
    this.lastActive = element; 
    //先把樣式整理好該remove哪個該加哪個 
    this.addWrapper(this.errorsFor(element)) 
    .removeClass(this.settings.errorClass) 
    .removeClass(this.settings.validClass) 
    .removeClass(this.settings.normalClass) 
    .addClass(this.settings.focusClass); 
    this.addWrapper(this.errorsFor(element)).html(this.errorsFor(element).attr("tip")); 
    // hide error label and remove error class on focus if enabled 
    if (this.settings.focusCleanup && !this.blockFocusCleanup) { 
        if (this.settings.unhighlight) { 
            this.settings.unhighlight.call(this, element, this.settings.errorClass, this.settings.validClass); 
        } 
        //this.addWrapper(this.errorsFor(element)).hide(); 
        this.addWrapper(this.errorsFor(element)).removeClass(this.settings.errorClass) 
                .removeClass(this.settings.validClass).addClass(this.settings.normalClass); 
    } 
}, 
onfocusout: function (element, event) { 
    this.addWrapper(this.errorsFor(element)) 
    .removeClass(this.settings.errorClass) 
    .removeClass(this.settings.focusClass) 
    .removeClass(this.settings.validClass) 
    .addClass(this.settings.normalClass); 
    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) { 
        this.element(element); 
    } 
}, 
//不用修改 
onkeyup: function (element, event) { 
    if (event.which === 9 && this.elementValue(element) === '') { 
        return; 
    } else if (element.name in this.submitted || element === this.lastActive) { 
        this.element(element); 
    } 
}, 
修改這些之後，還不起作用呢。接下來再修改showLabel方法

[javascript]
showLabel: function (element, message) {//顯示錯誤 
    var label = this.errorsFor(element); 
    if (label.length) { 
        // refresh error/success class 
        label.removeClass(this.settings.validClass) 
        .removeClass(this.settings.focusClass) 
        .removeClass(this.settings.normalClass) 
        .addClass(this.settings.errorClass); 
        label.html(message); 
        //不需要判斷有沒有generated屬性， 
        //因為class=tip已經表示是提示標籤了 
        // check if we have a generated label, replace the message then                     
        //if (label.attr("generated")) { 
        //    label.html(message); 
        //} 
    } else { 
        // create label 
        label = $("<" + this.settings.errorElement + "/>") 
        .attr({ "for": this.idOrName(element)}) 
        //.attr({ "for": this.idOrName(element), generated: true }) 
        .addClass(this.settings.signClass)//加上標記是提示標籤的class 
        .addClass(this.settings.errorClass) 
        .html(message || ""); 
        if (this.settings.wrapper) { 
            // make sure the element is visible, even in IE 
            // actually showing the wrapped element is handled elsewhere 
            label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent(); 
        } 
        if (!this.labelContainer.append(label).length) { 
            if (this.settings.errorPlacement) { 
                this.settings.errorPlacement(label, $(element)); 
            } else { 
                label.insertAfter(element); 
            } 
        } 
    } 
    if (!message && this.settings.success) { 
        label.text(""); 
        if (typeof this.settings.success === "string") { 
            label.addClass(this.settings.success); 
        } else { 
            this.settings.success(label, element); 
        } 
    } 
    this.toShow = this.toShow.add(label); 
}, 

再修改hideErrors方法
[javascript] 
hideErrors: function () { 
    this.addWrapper(this.toHide).removeClass(this.settings.errorClass) 
    .removeClass(this.settings.normalClass) 
    .removeClass(this.settings.focusClass) 
    .addClass(this.settings.validClass).html("輸入正確"); 
    //this.addWrapper(this.toHide).hide(); 
}, 

還漏了個方法，找到錯誤提示的標籤，不再需要根據calss=error來尋找標籤。
只需要尋找有標記標籤的label就可以了。
[css]
errors: function () { 
    //var errorClass = this.settings.errorClass.replace(' ', '.'); 
    //return $(this.settings.errorElement + "." + errorClass, this.errorContext); 
    return $(this.settings.errorElement + "."+this.settings.signClass, this.errorContext); 
}, 

接下來我們還要做一件事情，就是在初始化的時候顯示tip資訊，label的tip="請輸入使用者名稱"屬性派上用場了
，既然是初始化，我們找一下init方法吧。在300行左右的地方找到Init方法，加上以下代碼。
[javascript] 
this.reset(); 
//初始化的時候顯示提示資訊 
$.each(this.errors(),function(){ 
    $(this).html($(this).attr("tip")); 
}); 
很簡單的代碼。
到此提示部分修改完了，修改一下樣式吧

[css] 
label.error, label.valid, label.focus,label.normal {  
background: url(/content/images/ico_warn.png) no-repeat 4px -197px; 
font: 12px/1 verdana, simsun, sans-serif;  
margin: 0;  
padding: 4px 0px 4px 23px; 
} 
 
label.normal { background-position: 4px -197px; color: #999999;} 
label.error { background-position: 4px -253px;color: #B52726; } 
label.valid { background-position: 4px 3px;color: #2666AF; } 
label.focus { background-position: 4px -365px; color: #999999; } 

接下來你可以修改提示資訊
[html]
messages: { 
    required: "必填項", 
    remote: "Please fix this field.", 
    email: "郵箱非法,請確認", 
    url: "URL地址格式錯誤，請確認", 
    date: "日期格式錯誤，請確認", 
    dateISO: "日期格式(ISO)錯誤，請確認.", 
    number: "請輸入數字", 
    digits: "請輸入整數", 
    creditcard: "信用卡號碼格式錯誤", 
    equalTo: "兩次輸入不一致", 
    accept: "尾碼名錯誤", 
    mobile:"手機號碼格式錯誤", 
    tel:"電話號碼格式錯誤", 
    mobileOrTel:"手機或電話號碼格式錯誤", 
    qq:"QQ號碼格式錯誤", 
    chinese:"請輸入中文", 
    idcard:"社會安全號碼碼格式錯誤", 
    letter:"請輸入字母", 
    ip:"IP地址格式錯誤", 
    zipcode:"郵遞區號格式錯誤", 
    maxlength: $.validator.format("最多輸入 {0} 個字元"), 
    minlength: $.validator.format("最少輸入 {0} 個字元"), 
    rangelength: $.validator.format("字元長度介於 {0} 到 {1} 之間"), 
    range: $.validator.format("值大小介於 {0} 到 {1}之間"), 
    max: $.validator.format("最大值不超過 {0}"), 
    min: $.validator.format("最小值不小於 {0}") 
}, 
增加一些方法
[javascript]
methods: {.....}中修改或增加吧 

還有就是修改remote的驗證方法，據說是有錯誤的。不知道這個版本有沒有改過來
還有一個就是

[javascript] 
classRuleSettings: { 
    required: { required: true }, 
    email: { email: true }, 
    url: { url: true }, 
    date: { date: true }, 
    dateISO: { dateISO: true }, 
    number: { number: true }, 
    digits: { digits: true }, 
    creditcard: { creditcard: true } 
}, 
class驗證。
意思就是

[html] 
<input id="UserName" name="UserName" class="required" type="text" value="" /> 
加上class="required"自動驗證靠的就是這個了