本文實例為大家分享了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表單驗證大全
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。