本文实例为大家分享了js表单验证的具体代码,供大家参考,具体内容如下
效果图:
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);
}
};