JavaScript表單驗證開發(fā)
更新時間：2016年11月23日 09:24:48 作者：nbin斌
這篇文章主要為大家詳細介紹了JavaScript表單驗證開發(fā)的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js表單驗證的具體代碼，供大家參考，具體內(nèi)容如下
在線demo:http://www.hui12.com/nbin/csdn/jsInput/demo.html
效果圖：
/* 驗證類型
testName: "驗證用戶",
testPassword: "密碼",
testPhone: "手機號碼",
testQQ: "驗證QQ",
testLength: "驗證是否在指定長度內(nèi)", //3個參數(shù)，最小和最大
testEmail: "驗證郵箱",
testSame: "兩個元素比較是否相同", //接受兩個參數(shù)
testWX: "驗證微信昵稱",
testPlane: "驗證座機",
testManCard: "驗證身份證"
*/
/* 使用方法
* 創(chuàng)建實例對象 var a = new testInput();
* 傳入dom-JQ對象和對應的檢測的方法
* a.add( [$(".testName"),"testName"] ),以數(shù)組形式
* 可以接受2次數(shù)組多傳 a.add([[$(".testName"),"testName"], [$(".testName"),"testName"]])
* 檢測方法
* a.get( $(".testName") ) 獲取單個結果，返回結果為JSON {result:'結果', text:'提示'}
* a.get( [$(".testName"), $(".testName")] ) 獲取指定結果 返回結果為數(shù)組 [{obj:'',result:'',txt:''}, {obj:'',result:'',txt:''}]
* a.get() 如果不傳入?yún)?shù)，則獲取所有結果，不包含特殊驗證 testLength, testSame
* 特殊檢測
* 檢測是字節(jié)長度是否在指定范圍內(nèi) a.get( [$(".testLength"), min, max] ) 最小值最大值，數(shù)字類型
* 檢測兩個輸入內(nèi)容是否一致(2次密碼確認) a.get([$(".testSama"), $(".testSama"), "same"]) 前兩個為比較對象，第三個為固定必填參數(shù)
*/
(function(window, $){
var proto = {
testName: function($obj){
var str = $obj.val();
if( !this.checkNormal(str) ){
return {
result: false,
txt: "由字母，數(shù)字、下劃線組成"
}
};
if( !this.checkLength(str,6,20) ){
return {
result: false,
txt: "長度在6-20個字符以內(nèi)"
}
};
if( !this.checkFirstA(str) ){
return {
result: false,
txt: "第一個字符不能為數(shù)字"
}
};
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位數(shù)字組成"
}
}
},
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位數(shù)字"
}
}
},
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;
}
},
//檢測第一個字母是否為數(shù)字
checkFirstA: function(str){
var first = str.charAt(0);
if( /\d/.test(first) ){
return false;
}else{
return true;
}
},
//檢測數(shù)字+字母
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;
}
},
//檢測是否在規(guī)范長度內(nèi)
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 ){
//檢測所有， 返回數(shù)組結果
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.一個檢測，帶參數(shù)2，3 [obj,2,3]
// 2、一個檢測，和另外一個是否相等 [obj,obj,'same']
// 3、多個檢測，返回多個結果. [obj,obj]，又可能出現(xiàn)上面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{
//常規(guī)
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方法實現(xiàn)的思路
表單和規(guī)則對應，采用數(shù)組形式 【表單，規(guī)則】
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次數(shù)組，2次數(shù)組傳多個值
get方法
var This = this;
var args = arguments;
if( args.length === 0 ){
//檢測所有， 返回數(shù)組結果
var tmp = [];
$.each(This.cache, function(i, val) {
var newArr = [].concat(val);
newArr.splice(1,1);
tmp.push( newArr );
});
return merges(tmp,10);
}
如果沒有值，則獲取所有結果，所有執(zhí)行都是在merges函數(shù)里面執(zhí)行，merges第一個參數(shù)為檢測元素，結構為2次數(shù)組，[ [obj,a,b], [obj] ]，因為有特殊檢測帶有參數(shù)，所有里面一次數(shù)組實際上為檢測元素和要用的參數(shù)值，第二個參數(shù)為特殊參數(shù)，后文用來做判斷是否是全部檢測，用splice截取第二個參數(shù)，第二個參數(shù)為檢測方法，后面用不到，截取后的數(shù)組為 【dom，參數(shù)】
}else{
if( $.isArray(args[0]) ){ //[obj,obj,obj]
var tmp = [];
// 1.一個檢測，帶參數(shù)2，3 [obj,2,3]
// 2、一個檢測，和另外一個是否相等 [obj,obj,'same']
// 3、多個檢測，返回多個結果. [obj,obj]，又可能出現(xiàn)上面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{
//常規(guī)
return merges([[args[0]]], 1);
}
};
$.isArray(args[0]) 用來判斷是否是數(shù)組，不是數(shù)組則為dom對象，執(zhí)行merges([[args[0]]], 1)，第一個參數(shù)設置為2次數(shù)組，原因上文有提到，后面的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次數(shù)組，得到源生dom對象
var tName;<span style="white-space:pre"> </span>//執(zhí)行方法名字
$.each(This.cache, function(i2,val2) {
if( oldName == val2[0][0] ){<span style="white-space:pre"> </span>//如果傳入dom和cache已保存的dom一樣，則獲取dom執(zhí)行方法
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>//沒有執(zhí)行1的判斷，說明是多個元素檢測，手動增加一個obj屬性，方便返回值查詢，結果為[{},{}...]
result.push( r );
});
return one==1 ? result[0] : result;<span style="white-space:pre"> </span>//針對傳入?yún)?shù)返回不同結果
};
如果大家還想深入學習，可以點擊兩個精彩的專題：jquery表單驗證大全 JavaScript表單驗證大全
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript事件委托實現(xiàn)原理及優(yōu)點進行
這篇文章主要介紹了JavaScript事件委托實現(xiàn)原理及優(yōu)點進行,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
游戲人文件夾程序 ver 3.0...2006-07-07
這篇文章主要介紹了js實現(xiàn)div在頁面拖動效果,涉及JavaScript動態(tài)操作頁面元素與數(shù)值計算的相關技巧,需要的朋友可以參考下2016-05-05
本篇文章介紹了，使用js 獲取和設置css3 屬性值的實現(xiàn)方法。需要的朋友參考下2013-05-05
JavaScript知識點總結(十一)之js中的Object類詳解
這篇文章主要介紹了JavaScript知識點總結(十一)之js中的Object類詳解的相關資料,需要的朋友可以參考下2016-05-05
利用Js的console對象,在控制臺打印調式信息測試Js的實現(xiàn)
下面小編就為大家?guī)硪黄肑s的console對象,在控制臺打印調式信息測試Js的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
elementui-樹形控件實現(xiàn)子節(jié)點右側添加圖標和數(shù)據(jù)鼠標放上去顯示文字效果
這篇文章主要介紹了elementui-樹形控件實現(xiàn)子節(jié)點右側添加圖標和數(shù)據(jù)鼠標放上去顯示文字效果,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細介紹了小程序實現(xiàn)日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
在本篇文章里小編給大家整理的是關于JavaScript中this的使用以及代碼實例，需要的朋友們學習下。2020-02-02
這篇文章主要為大家介紹了JS中常見編碼及加密方式解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04