JavaScript表單驗(yàn)證開發(fā)
更新時(shí)間：2016年11月23日 09:24:48 作者：nbin斌
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證開發(fā)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js表單驗(yàn)證的具體代碼，供大家參考，具體內(nèi)容如下
在線demo:http://www.hui12.com/nbin/csdn/jsInput/demo.html
效果圖：
/* 驗(yàn)證類型
testName: "驗(yàn)證用戶",
testPassword: "密碼",
testPhone: "手機(jī)號(hào)碼",
testQQ: "驗(yàn)證QQ",
testLength: "驗(yàn)證是否在指定長(zhǎng)度內(nèi)", //3個(gè)參數(shù)，最小和最大
testEmail: "驗(yàn)證郵箱",
testSame: "兩個(gè)元素比較是否相同", //接受兩個(gè)參數(shù)
testWX: "驗(yàn)證微信昵稱",
testPlane: "驗(yàn)證座機(jī)",
testManCard: "驗(yàn)證身份證"
*/
/* 使用方法
* 創(chuàng)建實(shí)例對(duì)象 var a = new testInput();
* 傳入dom-JQ對(duì)象和對(duì)應(yīng)的檢測(cè)的方法
* a.add( [$(".testName"),"testName"] ),以數(shù)組形式
* 可以接受2次數(shù)組多傳 a.add([[$(".testName"),"testName"], [$(".testName"),"testName"]])
* 檢測(cè)方法
* a.get( $(".testName") ) 獲取單個(gè)結(jié)果，返回結(jié)果為JSON {result:'結(jié)果', text:'提示'}
* a.get( [$(".testName"), $(".testName")] ) 獲取指定結(jié)果 返回結(jié)果為數(shù)組 [{obj:'',result:'',txt:''}, {obj:'',result:'',txt:''}]
* a.get() 如果不傳入?yún)?shù)，則獲取所有結(jié)果，不包含特殊驗(yàn)證 testLength, testSame
* 特殊檢測(cè)
* 檢測(cè)是字節(jié)長(zhǎng)度是否在指定范圍內(nèi) a.get( [$(".testLength"), min, max] ) 最小值最大值，數(shù)字類型
* 檢測(cè)兩個(gè)輸入內(nèi)容是否一致(2次密碼確認(rèn)) a.get([$(".testSama"), $(".testSama"), "same"]) 前兩個(gè)為比較對(duì)象，第三個(gè)為固定必填參數(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: "長(zhǎng)度在6-20個(gè)字符以內(nèi)"
}
};
if( !this.checkFirstA(str) ){
return {
result: false,
txt: "第一個(gè)字符不能為數(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: "手機(jī)號(hào)碼由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: "請(qǐng)輸入正確的身份證號(hào)碼"
}
}
},
/*
* 檢測(cè)方法
*/
checkEmpty: function(str){
if( str.trim() == '' ){
return false;
}else{
return true;
}
},
//檢測(cè)第一個(gè)字母是否為數(shù)字
checkFirstA: function(str){
var first = str.charAt(0);
if( /\d/.test(first) ){
return false;
}else{
return true;
}
},
//檢測(cè)數(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;
}
},
//檢測(cè)是否在規(guī)范長(zhǎng)度內(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 ){
//檢測(cè)所有， 返回?cái)?shù)組結(jié)果
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.一個(gè)檢測(cè)，帶參數(shù)2，3 [obj,2,3]
// 2、一個(gè)檢測(cè)，和另外一個(gè)是否相等 [obj,obj,'same']
// 3、多個(gè)檢測(cè)，返回多個(gè)結(jié)果. [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: "請(qǐng)單獨(dú)獲取"
};
}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方法實(shí)現(xiàn)的思路
表單和規(guī)則對(duì)應(yīng)，采用數(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ù)組傳多個(gè)值
get方法
var This = this;
var args = arguments;
if( args.length === 0 ){
//檢測(cè)所有， 返回?cái)?shù)組結(jié)果
var tmp = [];
$.each(This.cache, function(i, val) {
var newArr = [].concat(val);
newArr.splice(1,1);
tmp.push( newArr );
});
return merges(tmp,10);
}
如果沒有值，則獲取所有結(jié)果，所有執(zhí)行都是在merges函數(shù)里面執(zhí)行，merges第一個(gè)參數(shù)為檢測(cè)元素，結(jié)構(gòu)為2次數(shù)組，[ [obj,a,b], [obj] ]，因?yàn)橛刑厥鈾z測(cè)帶有參數(shù)，所有里面一次數(shù)組實(shí)際上為檢測(cè)元素和要用的參數(shù)值，第二個(gè)參數(shù)為特殊參數(shù)，后文用來做判斷是否是全部檢測(cè)，用splice截取第二個(gè)參數(shù)，第二個(gè)參數(shù)為檢測(cè)方法，后面用不到，截取后的數(shù)組為 【dom，參數(shù)】
}else{
if( $.isArray(args[0]) ){ //[obj,obj,obj]
var tmp = [];
// 1.一個(gè)檢測(cè)，帶參數(shù)2，3 [obj,2,3]
// 2、一個(gè)檢測(cè)，和另外一個(gè)是否相等 [obj,obj,'same']
// 3、多個(gè)檢測(cè)，返回多個(gè)結(jié)果. [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對(duì)象，執(zhí)行merges([[args[0]]], 1)，第一個(gè)參數(shù)設(shè)置為2次數(shù)組，原因上文有提到，后面的1為后面結(jié)果做判斷，1直接返回json結(jié)果
為真的時(shí)候，里面又有三種情況，和備注的相對(duì)應(yīng)
function merges(arr, one){ //arr = [ [obj,a,b], [obj] ]
var result = [];<span style="white-space:pre"> </span>//返回結(jié)果
$.each(arr, function(i, val){
var oldName = val[0][0];<span style="white-space:pre"> </span>//val為1次數(shù)組，得到源生dom對(duì)象
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>//全部獲取，對(duì)特殊檢測(cè)做特殊處理
if( tName == "testLength" || tName == "testSame" ){
r = {
tName: "請(qǐng)單獨(dú)獲取"
};
}else{
r = This[tName].apply(This, val);
};
}else{<span style="white-space:pre"> </span>//獲取單個(gè)檢測(cè)結(jié)果
r = This[tName].apply(This, val);
};
if( one==1 ){<span style="white-space:pre"> </span>//如果為1，則只單個(gè)檢測(cè)，結(jié)果為[{}]，然后跳出
result.push(r);
return false;
};
r.obj = val[0];<span style="white-space:pre"> </span>//沒有執(zhí)行1的判斷，說明是多個(gè)元素檢測(cè)，手動(dòng)增加一個(gè)obj屬性，方便返回值查詢，結(jié)果為[{},{}...]
result.push( r );
});
return one==1 ? result[0] : result;<span style="white-space:pre"> </span>//針對(duì)傳入?yún)?shù)返回不同結(jié)果
};
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個(gè)精彩的專題：jquery表單驗(yàn)證大全 JavaScript表單驗(yàn)證大全
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- 詳解AngularJS實(shí)現(xiàn)表單驗(yàn)證
- jquery validate.js表單驗(yàn)證的基本用法入門
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- 收藏的js表單驗(yàn)證控制代碼大全
- JavaScript 使用正則表達(dá)式進(jìn)行表單驗(yàn)證的示例代碼
- 工作中常用到的JS表單驗(yàn)證代碼(包括例子)
- 一個(gè)即時(shí)表單驗(yàn)證的javascript代碼
相關(guān)文章
JS實(shí)現(xiàn)在Repeater控件中創(chuàng)建可隱藏區(qū)域的代碼
在WEB應(yīng)用中，如何才能使應(yīng)用高效率呢?如何才能吸引用戶呢?這的確是個(gè)大學(xué)問,頁面的內(nèi)容,色搭配等都十分重要。但不可忽視的是,多數(shù)情況下，對(duì)于數(shù)據(jù)的呈現(xiàn)方式也是十分重要的。2010-09-09
uni-app小程序分享功能實(shí)現(xiàn)方法舉例
這篇文章主要給大家介紹了關(guān)于uni-app小程序分享功能實(shí)現(xiàn)方法的相關(guān)資料,uni-app中有分享的API接口,但是需要現(xiàn)在QQ或者微信等開發(fā)者平臺(tái)上注冊(cè)賬號(hào),驗(yàn)證公司信息,而且只能分享圖片或者文本等內(nèi)容,需要的朋友可以參考下2023-07-07
Redux官網(wǎng)上是這樣描述Redux，Redux is a predictable state container for JavaScript apps.（Redux是JavaScript狀態(tài)容器，提供可預(yù)測(cè)性的狀態(tài)管理）。目前Redux GitHub有5w多star，足以說明 Redux 受歡迎的程度2021-06-06
JavaScript引用類型之基本包裝類型實(shí)例分析【Boolean、Number和String】
這篇文章主要介紹了JavaScript引用類型之基本包裝類型,結(jié)合實(shí)例形式分析了javascript中Boolean、Number和String三種基本包裝類型的基本用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
基于滾動(dòng)條位置判斷的簡(jiǎn)單實(shí)例
下面小編就為大家分享一篇基于滾動(dòng)條位置判斷的簡(jiǎn)單實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了小程序用戶登錄狀態(tài)檢查與更新實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
下面小編就為大家?guī)硪黄愃朴赒Q的右滑刪除效果的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
javascript 動(dòng)態(tài)改變層的Z-INDEX的代碼style.zIndex
javascript 動(dòng)態(tài)改變層的Z-INDEX的代碼style.zIndex...2007-08-08
js動(dòng)態(tài)生成Html元素實(shí)現(xiàn)Post操作（createElement）
這篇文章主要介紹了js動(dòng)態(tài)生成Html元素實(shí)現(xiàn)Post操作（createElement）,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JavaScript 拖拉時(shí)間之drag案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09