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 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
JavaScript前端实现压缩图片功能
Mar 06 Javascript
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脚本的10个技巧(8)
2006/10/09 PHP
WINXP下apache+php4+mysql
2006/11/25 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
Python中编写ORM框架的入门指引
2015/04/29 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
利用python实现数据分析
2017/01/11 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android