JavaScript表單驗(yàn)證開(kāi)發(fā)
更新時(shí)間：2016年11月23日 09:24:48 作者：nbin斌
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證開(kāi)發(fā)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js表單驗(yàn)證的具體代碼，供大家參考，具體內(nèi)容如下
在線demo:http://www.hui12.com/nbin/csdn/jsInput/demo.html
效果圖：
/* 驗(yàn)證類(lèi)型
testName: "驗(yàn)證用戶(hù)",
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)證微信昵稱(chēng)",
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ù)字類(lèi)型
* 檢測(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è)字符以?xún)?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)
主要說(shuō)說(shuō)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用來(lái)保存值
isTwo用來(lái)判斷是否是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);
}
如果沒(méi)有值，則獲取所有結(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ù)，后文用來(lái)做判斷是否是全部檢測(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]) 用來(lái)判斷是否是數(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>//沒(méi)有執(zhí)行1的判斷，說(shuō)明是多個(gè)元素檢測(cè)，手動(dòng)增加一個(gè)obj屬性，方便返回值查詢(xún)，結(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è)精彩的專(zhuān)題：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)證的基本用法入門(mé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)文章
JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行
這篇文章主要介紹了JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
游戲人文件夾程序 ver 3.0...2006-07-07
js實(shí)現(xiàn)div在頁(yè)面拖動(dòng)效果
這篇文章主要介紹了js實(shí)現(xiàn)div在頁(yè)面拖動(dòng)效果,涉及JavaScript動(dòng)態(tài)操作頁(yè)面元素與數(shù)值計(jì)算的相關(guān)技巧,需要的朋友可以參考下2016-05-05
js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法
本篇文章介紹了，使用js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法。需要的朋友參考下2013-05-05
JavaScript知識(shí)點(diǎn)總結(jié)(十一)之js中的Object類(lèi)詳解
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(十一)之js中的Object類(lèi)詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05
利用Js的console對(duì)象,在控制臺(tái)打印調(diào)式信息測(cè)試Js的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇利用Js的console對(duì)象,在控制臺(tái)打印調(diào)式信息測(cè)試Js的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
elementui-樹(shù)形控件實(shí)現(xiàn)子節(jié)點(diǎn)右側(cè)添加圖標(biāo)和數(shù)據(jù)鼠標(biāo)放上去顯示文字效果
這篇文章主要介紹了elementui-樹(shù)形控件實(shí)現(xiàn)子節(jié)點(diǎn)右側(cè)添加圖標(biāo)和數(shù)據(jù)鼠標(biāo)放上去顯示文字效果,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
JavaScript中this的學(xué)習(xí)筆記及用法整理
在本篇文章里小編給大家整理的是關(guān)于JavaScript中this的使用以及代碼實(shí)例，需要的朋友們學(xué)習(xí)下。2020-02-02
這篇文章主要為大家介紹了JS中常見(jiàn)編碼及加密方式解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04