JavaScript表单验证开发


Posted in Javascript onNovember 23, 2016

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

在线demo:http://www.hui12.com/nbin/csdn/jsInput/demo.html 

效果图:

JavaScript表单验证开发

/* 验证类型 
testName: "验证用户", 
testPassword: "密码", 
testPhone: "手机号码", 
testQQ: "验证QQ", 
testLength: "验证是否在指定长度内", //3个参数,最小和最大 
testEmail: "验证邮箱", 
testSame: "两个元素比较是否相同", //接受两个参数 
testWX: "验证微信昵称", 
testPlane: "验证座机", 
testManCard: "验证身份证" 
*/ 
/* 使用方法 
 * 创建实例对象 var a = new testInput(); 
 * 传入dom-JQ对象和对应的检测的方法 
 * a.add( [$(".testName"),"testName"] ),以数组形式 
 * 可以接受2次数组多传 a.add([[$(".testName"),"testName"], [$(".testName"),"testName"]]) 
 * 检测方法 
 * a.get( $(".testName") ) 获取单个结果,返回结果为JSON {result:'结果', text:'提示'} 
 * a.get( [$(".testName"), $(".testName")] ) 获取指定结果 返回结果为数组 [{obj:'',result:'',txt:''}, {obj:'',result:'',txt:''}] 
 * a.get() 如果不传入参数,则获取所有结果,不包含特殊验证 testLength, testSame 
 * 特殊检测 
 * 检测是字节长度是否在指定范围内 a.get( [$(".testLength"), min, max] ) 最小值最大值,数字类型 
 * 检测两个输入内容是否一致(2次密码确认) a.get([$(".testSama"), $(".testSama"), "same"]) 前两个为比较对象,第三个为固定必填参数 
 */ 
 
(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(),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; 
  } 
 }, 
 //检测第一个字母是否为数字 
 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,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 ){ 
  //检测所有, 返回数组结果 
  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,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], function(i, 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,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方法实现的思路

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

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次数组,2次数组传多个值

get方法

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); 
}

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

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

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

如果大家还想深入学习,可以点击两个精彩的专题:jquery表单验证大全 JavaScript表单验证大全

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
Vue响应式原理详解
Apr 18 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 #Javascript
分类解析jQuery选择器
Nov 23 #Javascript
概述jQuery的元素筛选
Nov 23 #Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 #Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 #Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 #Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 #Javascript
You might like
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
Python中字符串的修改及传参详解
2016/11/30 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Python实现微信好友的数据分析
2019/12/16 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
Pytorch转tflite方式
2020/05/25 Python
python对execl 处理操作代码
2020/06/22 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
医科学校毕业生自荐信
2013/11/09 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
小学国庆节活动方案
2014/02/11 职场文书
典型事迹材料范文
2014/12/29 职场文书
三潭印月的导游词
2015/02/12 职场文书
2016年十一促销广告语
2016/01/28 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
MySQL数据库事务的四大特性
2022/04/20 MySQL
python 学习GCN图卷积神经网络
2022/05/11 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技