JavaScript表单验证开发

本文实例为大家分享了js表单验证的具体代码,供大家参考,具体内容如下

在线demo:

效果图:

(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(),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: "不一致"
}
}
},testWX: function($obj){
var str = $obj.val();
var reg = /^[a-z_\d]+$/;
if( reg.test(str) ){
return {
result: true,txt: ""
}
}
},testPlane: function($obj){
var str = $obj.val();
var reg = /^\d{3,4}-\d{5,8}$/;
if( reg.test(str) ){
return {
result: true,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,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,'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],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,b],[obj] ]
    var result = [];
    $.each(arr,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方法实现的思路

表单和规则对应,采用数组形式 【表单,规则】

cache用来保存值 isTwo用来判断是否是2次数组,2次数组传多个值

get方法

如果没有值,则获取所有结果,所有执行都是在merges函数里面执行,merges第一个参数为检测元素,结构为2次数组,[ [obj,[obj] ],因为有特殊检测带有参数,所有里面一次数组实际上为检测元素和要用的参数值,第二个参数为特殊参数,后文用来做判断是否是全部检测,用splice截取第二个参数,第二个参数为检测方法,后面用不到,截取后的数组为 【dom,参数】

<div class="jb51code">
<pre class="brush:js;">
}else{
if( $.isArray(args[0]) ){ //[obj,obj]
var tmp = [];
// 1.一个检测,带参数2,3 [obj,3]
// 2、一个检测,和另外一个是否相等 [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],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结果 为真的时候,里面又有三种情况,和备注的相对应

//返回结果 $.each(arr,val){ var oldName = val[0][0];//val为1次数组,得到源生dom对象 var tName;//执行方法名字 $.each(This.cache,val2) { if( oldName == val2[0][0] ){//如果传入dom和cache已保存的dom一样,则获取dom执行方法 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 ){//如果为1,则只单个检测,结果为[{}],然后跳出 result.push(r); return false; }; r.obj = val[0];//没有执行1的判断,说明是多个元素检测,手动增加一个obj属性,方便返回值查询,结果为[{},{}...] result.push( r ); }); return one==1 ? result[0] : result;//针对传入参数返回不同结果 };

如果大家还想深入学习,可以点击两个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...