工作中經常要進行表單驗證，一個網站做下來，自己也積累了一套。放出來做個備份！
框架的兩個核心方法，一個是用於處理提示信息，另一個是調用驗證函數！
//用於顯示錯誤提示
//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) < 11 && parseInt( i ) === Number(i);
}
});
validate("#add_widget_form","email",{//判定郵箱
"格式不正確":function(el){
var val = $.trim(el.value);
return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(val)
}
});
validate("#add_widget_form","phone",{//判定手機號碼
"格式不正確":function(el){
var val = $.trim(el.value);
return /^(13|15|18|14)\d{9}$/.test(val)
}
});
如果有一些驗證一定要在后端，那么發現出錯，就把它們放到一個對象中，格式{類名：出錯提示,類名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元素,填寫錯誤提示!
}
}
})
})