jquery validate

jquery validate

作網頁表單常常要用到數據校驗的功能.JavaScript校驗是一種比較經常使用的手段。最近寫頁面寫得比較多，發現了一個比較好用的js校驗框架--jQuery.validate。她是一款基於jquery的校驗工具，基本能夠知足咱們大多數的頁面校驗須要，且支持ajax校驗。支持各類自定義的擴展，包括自定義校驗規則，自定義錯誤顯示的方式等。

經過一段時間的使用，感受用起來仍是很是簡單的。這裏作一下使用方法的簡單介紹，然後會介紹一個我本身擴展的一種錯誤提示方式（感受默認的信息提示的方式比較通常實在不怎麼好看）。
閒話少說，先說下用法：
先導入必要的兩個js文件

XML/HTML代碼

<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script> 

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

另外還有一段css，用來突出顯示出錯的表單控件和錯誤信息的顯示樣式:

CSS代碼

input.error { border: 1px dotted red; }  

label.error {  

    color: red;display: none;  

}  

         label.error 的display: none是爲了讓咱們能夠在頁面上任意位置放置顯示錯誤的label以及上面的內容，並在沒有進行校驗時不顯示出來。
須要的東西都齊了，咱們能夠爲咱們的表單元素添加校驗了。添加校驗的方法總的說有兩種：一種寫在控件的標籤上；另外一種寫在js腳本中。而且兩種方法可混合使用。
第一種寫在標籤中的以下：

XML/HTML代碼

<input type="text" class="required number" max="10" name="t1"> 

         class="required number" 表示必須字段且爲數值型，max="10" 表示最大值爲10。
另外一種使用JavaScript腳本的寫法以下:

XML/HTML代碼

<script type="text/javascript"> 

$('#test_form').validate({  

rules:{  

t2 : {required:true,number:true}  

},  

messages:{t2:{required :"這個字段你必須填~~！",number:"這個字段真能夠是數字"}}  

});  

</script> 

其中test_form是表單form的id，t2是須要校驗的控件的名字。rules後面的json描述的是校驗規則，messages是自定義的錯誤信息。順便說一句，有時候咱們form中控件的name中是帶「.」的，好比：user.name,這時候用js腳本定義校驗規則時，須要加上引號：」user.name」。
這兩種寫法各有利弊，直接寫在控件標籤上的比較簡單直觀，相對來講js的寫法過於複雜，可靈活性更強。並且有時候咱們可能沒機會在控件的標籤上寫規則，假如咱們用了標籤庫，如struts標籤庫，有些標籤咱們寫上max=「10」這樣的東西，標籤庫將沒法解析直接報錯。總之，這兩種寫法jQuery.validate都認識，咱們在合適的場景選擇合適的方式就能夠了。
另外，若是你想把規則寫在控件的標籤上，僅僅寫上規則是不行的，還須要在頁面加載完的時候調用一下$('#test_form').validate();爲form添加校驗，這樣在你點提交按鈕的時候就會自動校驗了。
說了這麼多，該上個圖了，看看校驗的效果：

成功了，校驗的效果有了，表單也不會被提交。可能有的同窗要說了，「要不要這麼難看啊？」。這正是我下面要解決的問題。
咱們來自定義一個錯誤顯示的方式，效果以下：

錯誤控件突出顯示的方式沒有改，爲了兼容有些瀏覽器有些控件好比火狐中單選按鈕無法標註紅框的問題，在每一個錯誤的控件後面放了一個紅色的小叉號，另外當鼠標移動到錯誤控件或者小叉號上時顯示錯誤的信息。
實現這個效果的主要js代碼以下：

JavaScript代碼

function showErrors(){  

        var t = this;  

        for ( var i = 0; this.errorList[i]; i++ ) {  

            var error = this.errorList[i];  

            this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );  

            var elename = this.idOrName(error.element);  

            // 錯誤信息div  

            var errdiv = $('div[htmlfor='+ elename + ']');  

            var errimg = $('img[htmlfor='+ elename + ']');  

            if(errdiv.length == 0){ // 沒有div則建立

                // 純css不用圖片的圓角div，存在在IE6下顯示過長的問題

//              errdiv = $('<div>'   

//              +   '<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>'  

//              +   '<span class="errmsg"> </span>'  

//              +   '<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> '  

//              +   '</div> ');  

                // 帶圖片的圓角div在全部瀏覽器兼容

                errdiv = $('<div>'   

                        + '<img src="img/left_icon.gif" width="6" height="24" align="absmiddle" class="fl" />' 

                        + '<div class="errmsgdiv fl errmsg"></div>' 

                        + '<img src="img/right_icon.gif" width="6" height="24" align="absmiddle" class="fl" />' 

                        + '</div>');  

                errdiv.attr({"for":  this.idOrName(error.element), generated: true})  

                .addClass(this.settings.errorClass);  

//              errdiv.css({left : $.getLeft(error.element) + 'px',top : $.getTop(error.element) + 'px'}); // 顯示在控件的下面

                errdiv.appendTo($('body'));  

            }  

            if(errimg.length == 0){ // 沒有img則建立

                errimg = $('<img alt="錯誤" src="img/unchecked.gif">')  

                errimg.attr({"for":  this.idOrName(error.element), generated: true});  

                errimg.insertAfter(error.element);  

            }  

            errimg.show();  

            errdiv.find(".errmsg").html(error.message || "");  

            // 鼠標放到圖片顯示錯誤

            $(errimg).hover(function(e){  

                $('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 顯示在鼠標位置偏移20的位置

                $('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeIn(200);  

            },  

            function(){  

                $('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeOut(200);  

            });  

            // 鼠標放到控件上顯示錯誤

            $(error.element).hover(function(e){  

                $('div[htmlfor="'+ t.idOrName(this) + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 顯示在鼠標位置偏移20的位置

                $('div[htmlfor="'+ t.idOrName(this) + '"]').fadeIn(200);  

            },  

            function(){  

                $('div[htmlfor="'+ t.idOrName(this) + '"]').fadeOut(200);  

            });  

        }  

        // 校驗成功的去掉錯誤提示

        for ( var i = 0; this.successList[i]; i++ ) {  

                $('div[htmlfor="'+ this.idOrName(this.successList[i]) + '"]').remove();  

                $('img[htmlfor='+ this.idOrName(this.successList[i]) + ']').hide();  

        }  

        // 自定義高亮

        if (this.settings.unhighlight) {  

            for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {  

                this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );  

            }  

        }  

    }  

$.extend({  

        getLeft : function(object) {  

            var go = object;  

            var oParent, oLeft = go.offsetLeft;  

            while (go.offsetParent != null) {  

                oParent = go.offsetParent;  

                oLeft += oParent.offsetLeft;  

                go = oParent;  

            }  

            return oLeft;  

        },  

        getTop : function(object) {  

            var go = object;  

            var goHeight = go.height;  

            var oParent, oTop = go.offsetTop;  

            while (go.offsetParent != null) {  

                oParent = go.offsetParent;  

                oTop += oParent.offsetTop;  

                go = oParent;  

            }  

            return oTop + 22;// 之因此加22不加控件高度,爲了兼容ie6.  

        }  

});  

// 本地語言

jQuery.extend(jQuery.validator.messages, {  

        required: "必選字段",  

        remote: "請修正該字段",  

        email: "請輸入正確格式的電子郵件",  

        url: "請輸入合法的網址",  

        date: "請輸入合法的日期",  

        dateISO: "請輸入合法的日期 (ISO).",  

        number: "請輸入合法的數字",  

        digits: "只能輸入整數",  

        creditcard: "請輸入合法的信用卡號",  

        equalTo: "請再次輸入相同的值",  

        accept: "請輸入擁有合法後綴名的字符串",  

        maxlength: jQuery.validator.format("請輸入一個長度最可能是 {0} 的字符串"),  

        minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"),  

        rangelength: jQuery.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"),  

        range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),  

        max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"),  

        min: jQuery.validator.format("請輸入一個最小爲 {0} 的值")  

});  

自定義一個showErrors的方法，而後在爲表單添加校驗時，指定使用這個方法顯示錯誤信息。

JavaScript代碼

$('#test_form').validate({  

rules:{  

t2 : {required:true,number:true}  

},  

messages:{t2:{required :"這個字段你必須填~~！",number:"這個字段真的能夠是數字"}},  

showErrors: showErrors  //使用自定義的錯誤顯示方法

}); 

這樣子咱們想要的效果就實現了，是否是感受比原來的樣子好多了呢？
jQuery.validate是一個很是靈活的JavaScript校驗框架，上面只是介紹了一下基本的用法和自定義了一個錯誤顯示的樣式。通常的表單校驗基本能夠搞定了，不過一些比較特殊，好比身份證號的校驗，頁面上FCK編輯器的校驗，仍是須要咱們本身來擴展的。我的感受這是個很不錯的js校驗框架，因此介紹給你們，但願有所幫助。