一個簡單的驗證架構

工作中經常要進行表單驗證，一個網站做下來，自己也積累了一套。放出來做個備份！

架構的兩個核心方法，一個是用於處理提示資訊，另一個是調用驗證函式！

    //用於顯示錯誤提示    //HTML 格式     //@param id 元素的CSS運算式    //@param status    //0 表示失敗，這時第三個參數有效，顯示這紅色字    //1表示成功，會在此元素的父節點上添加一個叫okey的類名，顯示綠色的勾號    //2表示隱藏，去掉元素的innerHTML與父節點上的okey的類名    //@param msg 錯誤訊息    function showTip(id, status, msg){        var el = $(id), parent = el.parent(), node = el[0], nodes = showTip.nodes;        switch(status){            case 0 :                parent.removeClass("okey");                if(node){                    node.innerHTML = msg                    if($.Array.indexOf(nodes, node) == -1){//用去統計當前頁面有多少個驗證沒有被通過                        nodes.push(node);                    }                }                break;            case 1:                parent.addClass("okey");                if(node){                    node.innerHTML = "";                    $.Array.remove(nodes, node);                }                break            case 2:                parent.removeClass("okey");                if(node){                    node.innerHTML = "";                    $.Array.remove(nodes, node);                }                break        }    }    showTip.nodes = [];    /**     *@param root 綁定事件的元素的CSS選取器，通常是form元素     *@param name 控制項的類名，要去掉前面的點號。之所以用類名，因為checkbox是一組的，共用一個name值，不能用ID     *@param obj 驗證用的函數與錯誤提示，錯誤提示作為鍵名，函數為值。     *@param checktype 觸發驗證用的事件名，預設為blur     */    function validate(root, name, obj, checktype){        checktype = checktype || "blur"        $(root).delegate("."+name, checktype, function(){            var ok = true            for(var msg in obj){                if(!obj[ msg ](this)){                    showTip("#err_"+name, 0 , msg );//失敗了就顯示紅色的錯誤提示                    ok = false;                    break                }            }            if(ok){                showTip("#err_"+name, 1);//顯示成功提示，綠色的勾號            }        } ).delegate("."+name, "focus",function(){            showTip("#err_"+name, 2);//隱藏所有提示！        })    }/* * 根據手機號碼擷取電訊廠商的序號 * @param { Number } 11位手機號碼 * @return { Number } 各電訊廠商對應的序號  * 0 : 移動，1 : 聯通，2 ： 電信，-1 : 號碼錯誤 */var getISP = function( number ){var rCMCC = /^(139|138|137|136|135|134|159|158|152|151|150|157|188|187|147|182|183)[0-9]{8}$/,// 移動rUNICOM = /^(130|131|132|155|156|186|185)[0-9]{8}$/,// 聯通rCT = /^(133|153|189|180)[0-9]{8}$/;// 電信return rCMCC.test(number) ? 0 :rUNICOM.test(number) ? 1 :rCT.test(number) ? 2 :-1;};

表單的結構。每一個表單都有一個與它name值同名的類名，並且還有span標籤用於放置錯誤訊息，span裡面有個em元素，它的類名比控制項的類名多了一個“err_”首碼！

<form id="add_widget_form">        <table  id="add_widget_table" >            <tbody>               <tr>                    <td align="right">名稱：</td>                    <td>                        <input name="name" class="name" style="width:200px;"/>                        <span class="tips"><em id="err_name"></em></span>                    </td>                </tr>                <tr>                    <td align="right">尺寸：</td>                    <td>高<input name="height" class="height" style="width:100px;" value="200" /> px                        寬<input name="width" class="width"  style="width:100px;" value="700"  /> px                        <span class="tips"><em id="err_height"></em></span>                        <span class="tips"><em id="err_width"></em></span>                    </td>                </tr>                <tr>                    <td align="right">視頻數：</td>                    <td>                        <input name="video_count" class="video_count" style="width:200px;" />個                        <span class="tips"><em id="err_video_count"></em></span>                    </td>                </tr>             </tbody>           </table>  <center><button id="submit_info" class="widget_btn" type="button"><span>完善資訊</span></button></center></form>

簡單樣本：

    validate("#add_widget_form", "name",{        "不可為空":function(el){            return $.trim(el.value).length != 0        }    });    var checkNumber = {        "只能填一個正整數":function(el){            var i = el.value;            return  Number(i) > 0 &&  parseInt( i ) === Number(i);        }    }    validate("#add_widget_form", "width", checkNumber);    validate("#add_widget_form", "height",checkNumber)    validate("#add_widget_form", "video_count",{        "數量在1~10之間":function(el){            var i = el.value            return  Number(i) > 0 &&  Number(i) 
如果有一些驗證一定要在後端，那麼發現出錯，就把它們放到一個對象中，格式{類名：出錯提示,類名2：出錯提示2,類名3：出錯提示3}，即
 $("#submit_info").click( function(){        if(showTip.nodes.length){                return //如果當前頁面還有驗證沒有通過,就不用提交到後台了!        }        $.post(url, params,function(json){            if(json.err == "ok"){                alert("成功了")            }else{                for(var i in json.msg){                    showTip("#err_"+i, 0, json.msg[i]);//找到.tips標籤下的EM元素,填寫錯誤提示!                }            }        })})