DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript表單驗證開發
JavaScript表單驗證開發
編輯:關於JavaScript     

本文實例為大家分享了js表單驗證的具體代碼,供大家參考,具體內容如下

在線demo:http://www.hui12.com/nbin/csdn/jsInput/demo.html 

效果圖:

/* 驗證類型 
testName: "驗證用戶", 
testPassword: "密碼", 
testPhone: "手機號碼", 
testQQ: "驗證QQ", 
testLength: "驗證是否在指定長度內", //3個參數,最小和最大 
testEmail: "驗證郵箱", 
testSame: "兩個元素比較是否相同", //接受兩個參數 
testWX: "驗證微信昵稱", 
testPlane: "驗證座機", 
testManCard: "驗證身份證" 
*/ 
/* 使用方法 
 * 創建實例對象 var a = new testInput(); 
 * 傳入dom-JQ對象和對應的檢測的方法 
 * a.add( [$(".testName"),"testName"] ),以數組形式 
 * 可以接受2次數組多傳 a.add([[$(".testName"),"testName"], [$(".testName"),"testName"]]) 
 * 檢測方法 
 * a.get( $(".testName") ) 獲取單個結果,返回結果為JSON {result:'結果', text:'提示'} 
 * a.get( [$(".testName"), $(".testName")] ) 獲取指定結果 返回結果為數組 [{obj:'',result:'',txt:''}, {obj:'',result:'',txt:''}] 
 * a.get() 如果不傳入參數,則獲取所有結果,不包含特殊驗證 testLength, testSame 
 * 特殊檢測 
 * 檢測是字節長度是否在指定范圍內 a.get( [$(".testLength"), min, max] ) 最小值最大值,數字類型 
 * 檢測兩個輸入內容是否一致(2次密碼確認) a.get([$(".testSama"), $(".testSama"), "same"]) 前兩個為比較對象,第三個為固定必填參數 
 */ 
 
(function(window, $){ 
 var proto = { 
 testName: function($obj){ 
  var str = $obj.val(); 
  if( !this.checkNormal(str) ){ 
  return { 
   result: false, 
   txt: "由字母,數字、下劃線組成" 
  } 
  }; 
  if( !this.checkLength(str,6,20) ){ 
  return { 
   result: false, 
   txt: "長度在6-20個字符以內" 
  } 
  }; 
  if( !this.checkFirstA(str) ){ 
  return { 
   result: false, 
   txt: "第一個字符不能為數字" 
  } 
  }; 
  return { 
  result: true, 
  txt: "" 
  } 
 }, 
 testPassword: function($obj){ 
  return this.testName($obj); 
 }, 
 testPhone: function($obj){ 
  var str = $obj.val(); 
  var re = /^1\d{10}$/; 
  if( re.test(str) ){ 
  return { 
   result: true, 
   txt: "" 
  } 
  }else{ 
  return { 
   result: false, 
   txt: "手機號碼由11位數字組成" 
  } 
  } 
 }, 
 testQQ: function($obj){ 
  var str = $obj.val(); 
  var re = /^\d{5,10}$/; 
  if( re.test(str) ){ 
  return { 
   result: true, 
   txt: '' 
  } 
  }else{ 
  return { 
   result: false, 
   txt: "5~10位數字" 
  } 
  } 
 }, 
 testLength: function($obj, a, b){ 
  if( this.checkLength($obj.val(),a,b) ){ 
  return { 
   result: true 
  } 
  }else{ 
  return { 
   result: false 
  } 
  } 
 }, 
 testEmail: function($obj){ 
  var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; 
  var str = $obj.val(); 
  if( re.test(str) ){ 
  return { 
   result: true, 
   txt: "" 
  }; 
  }else{ 
  return { 
   result: false, 
   txt: "郵箱格式不正確" 
  } 
  }; 
 }, 
 testSame: function($obj1, $obj2){ 
  if( $obj1.val() == $obj2.val() ){ 
  return { 
   result: true, 
   txt: "" 
  } 
  }else{ 
  return { 
   result: false, 
   txt: "不一致" 
  } 
  } 
 }, 
 testWX: function($obj){ 
  var str = $obj.val(); 
  var reg = /^[a-z_\d]+$/; 
  if( reg.test(str) ){ 
  return { 
   result: true, 
   txt: "" 
  }; 
  }else{ 
  return { 
   result: false, 
   txt: "" 
  } 
  } 
 }, 
 testPlane: function($obj){ 
  var str = $obj.val(); 
  var reg = /^\d{3,4}-\d{5,8}$/; 
  if( reg.test(str) ){ 
  return { 
   result: true, 
   txt: "" 
  } 
  }else{ 
  return { 
   result: false, 
   txt: "格式為:010-1234567" 
  } 
  } 
 }, 
 testManCard: function($obj){ 
  var str = $obj.val(); 
  var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
  if( reg.test(str) ){ 
  return { 
   result: true, 
  } 
  }else{ 
  return { 
   result: false, 
   text: "請輸入正確的身份證號碼" 
  } 
  } 
 }, 
  
 /* 
  * 檢測方法 
  */ 
 checkEmpty: function(str){ 
  if( str.trim() == '' ){ 
  return false; 
  }else{ 
  return true; 
  } 
 }, 
 //檢測第一個字母是否為數字 
 checkFirstA: function(str){ 
  var first = str.charAt(0); 
  if( /\d/.test(first) ){ 
  return false; 
  }else{ 
  return true; 
  } 
 }, 
 //檢測數字+字母 
 checkNormal: function(str){ 
  var reg = /^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i; 
  if( reg.test(str) ){ 
  return true; 
  }else{ 
  return false; 
  } 
 }, 
 //檢測是否在規范長度內 
 checkLength: function(str,a,b){ 
  var min = a || 6; 
  var max = b || 20; 
  var length = str.length; 
  if( length>=a && length <= b ){ 
  return true; 
  }else{ 
  return false; 
  } 
 }, 
 // 
 add: function(arr){ 
  !this.cache && (this.cache = []); 
  var isTwo = $.isArray(arr[0]); 
  if( isTwo ){ 
  this.cache = this.cache.concat(arr); 
  }else{ 
  this.cache.push(arr); 
  }; 
  return this; 
 }, 
 get: function(){ 
  var This = this; 
  var args = arguments; 
  if( args.length === 0 ){ 
  //檢測所有, 返回數組結果 
  var tmp = []; 
  $.each(This.cache, function(i, val) { 
   var newArr = [].concat(val); 
   newArr.splice(1,1); 
   tmp.push( newArr ); 
  }); 
  return merges(tmp,10); 
  }else{ 
  if( $.isArray(args[0]) ){ //[obj,obj,obj] 
   var tmp = []; 
   // 1.一個檢測,帶參數2,3 [obj,2,3] 
   // 2、一個檢測,和另外一個是否相等 [obj,obj,'same'] 
   // 3、多個檢測,返回多個結果. [obj,obj],又可能出現上面2種情況 
   if( !isNaN(args[0][1]) || !isNaN(args[0][2]) ){ 
   tmp.push(args[0]); 
   return merges(tmp, 1); 
   }; 
   if( args[0][2] == 'same' ){ 
   args[0].splice(2,1); 
   tmp.push(args[0]); 
   return merges(tmp, 1); 
   }; 
   $.each(args[0], function(i, val) { 
   if( $.isArray(val) ){ 
    tmp.push(val); 
   }else{ 
    tmp.push([val]); 
   }; 
   }); 
   return merges(tmp); 
  }else{ 
   //常規 
   return merges([[args[0]]], 1); 
  } 
  }; 
  function merges(arr, one){ //arr = [ [obj,a,b], [obj] ] 
  var result = []; 
  $.each(arr, function(i, val){ 
   var oldName = val[0][0]; 
   var tName; 
   $.each(This.cache, function(i2,val2) { 
   if( oldName == val2[0][0] ){ 
    tName = val2[1]; 
    return false; 
   }; 
   }); 
   var r; 
   if( one == 10){ 
   if( tName == "testLength" || tName == "testSame" ){ 
    r = { 
    tName: "請單獨獲取" 
    }; 
   }else{ 
    r = This[tName].apply(This, val); 
   }; 
   }else{ 
   r = This[tName].apply(This, val); 
   }; 
   if( one==1 ){ 
   result.push(r); 
   return false; 
   }; 
   r.obj = val[0]; 
   result.push( r ); 
  }); 
  return one==1 ? result[0] : result; 
  }; 
 } 
 }; 
 function Test(){ 
 return this; 
 }; 
 Test.prototype = proto; 
 Test.prototype.constructor = Test; 
 window.Test = Test; 
})(window, jQuery) 

主要說說add和get方法實現的思路

表單和規則對應,采用數組形式 【表單,規則】

add: function(arr){ 
 !this.cache && (this.cache = []); 
 var isTwo = $.isArray(arr[0]); 
 if( isTwo ){ 
 this.cache = this.cache.concat(arr); 
 }else{ 
 this.cache.push(arr); 
 }; 
 return this; 
} 

cache用來保存值
isTwo用來判斷是否是2次數組,2次數組傳多個值

get方法

var This = this; 
var args = arguments; 
if( args.length === 0 ){ 
 //檢測所有, 返回數組結果 
 var tmp = []; 
 $.each(This.cache, function(i, val) { 
 var newArr = [].concat(val); 
 newArr.splice(1,1); 
 tmp.push( newArr ); 
 }); 
 return merges(tmp,10); 
} 

如果沒有值,則獲取所有結果,所有執行都是在merges函數裡面執行,merges第一個參數為檢測元素,結構為2次數組,[ [obj,a,b], [obj] ],因為有特殊檢測帶有參數,所有裡面一次數組實際上為檢測元素和要用的參數值,第二個參數為特殊參數,後文用來做判斷是否是全部檢測,用splice截取第二個參數,第二個參數為檢測方法,後面用不到,截取後的數組為 【dom,參數】

}else{ 
 if( $.isArray(args[0]) ){ //[obj,obj,obj] 
 var tmp = []; 
 // 1.一個檢測,帶參數2,3 [obj,2,3] 
 // 2、一個檢測,和另外一個是否相等 [obj,obj,'same'] 
 // 3、多個檢測,返回多個結果. [obj,obj],又可能出現上面2種情況 
 if( !isNaN(args[0][1]) || !isNaN(args[0][2]) ){ 
  tmp.push(args[0]); 
  return merges(tmp, 1); 
 }; 
 if( args[0][2] == 'same' ){ 
  args[0].splice(2,1); 
  tmp.push(args[0]); 
  return merges(tmp, 1); 
 }; 
 $.each(args[0], function(i, val) { 
  if( $.isArray(val) ){ 
  tmp.push(val); 
  }else{ 
  tmp.push([val]); 
  }; 
 }); 
 return merges(tmp); 
 }else{ 
 //常規 
 return merges([[args[0]]], 1); 
 } 
}; 

$.isArray(args[0]) 用來判斷是否是數組,不是數組則為dom對象,執行merges([[args[0]]], 1),第一個參數設置為2次數組,原因上文有提到,後面的1為後面結果做判斷,1直接返回json結果
為真的時候,裡面又有三種情況,和備注的相對應

function merges(arr, one){ //arr = [ [obj,a,b], [obj] ] 
 var result = [];<span style="white-space:pre"> </span>//返回結果 
 $.each(arr, function(i, val){ 
 var oldName = val[0][0];<span style="white-space:pre"> </span>//val為1次數組,得到源生dom對象 
 var tName;<span style="white-space:pre"> </span>//執行方法名字 
 $.each(This.cache, function(i2,val2) { 
  if( oldName == val2[0][0] ){<span style="white-space:pre"> </span>//如果傳入dom和cache已保存的dom一樣,則獲取dom執行方法 
  tName = val2[1]; 
  return false; 
  }; 
 }); 
 var r; 
 if( one == 10){<span style="white-space:pre"> </span>//全部獲取,對特殊檢測做特殊處理 
  if( tName == "testLength" || tName == "testSame" ){ 
  r = { 
   tName: "請單獨獲取" 
  }; 
  }else{ 
  r = This[tName].apply(This, val); 
  }; 
 }else{<span style="white-space:pre"> </span>//獲取單個檢測結果 
  r = This[tName].apply(This, val); 
 }; 
 if( one==1 ){<span style="white-space:pre"> </span>//如果為1,則只單個檢測,結果為[{}],然後跳出 
  result.push(r); 
  return false; 
 }; 
 r.obj = val[0];<span style="white-space:pre"> </span>//沒有執行1的判斷,說明是多個元素檢測,手動增加一個obj屬性,方便返回值查詢,結果為[{},{}...] 
 result.push( r ); 
 }); 
 return one==1 ? result[0] : result;<span style="white-space:pre"> </span>//針對傳入參數返回不同結果 
};

如果大家還想深入學習,可以點擊兩個精彩的專題:jquery表單驗證大全 JavaScript表單驗證大全

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved