驗證框架

//用於顯示錯誤提示 //HTML 格式 <DIV class="l tips"><EM id=err-intro></EM></DIV> //@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元素,填寫錯誤提示!                  }              }          }) })