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 相关文章推荐
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
vue监听dom大小改变案例
Jul 29 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新手上路(十二)
2006/10/09 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
医学专业毕业生推荐信
2013/11/14 职场文书
干部培训自我鉴定
2014/01/22 职场文书
上课看小说检讨书
2014/02/22 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
电子商务求职信
2014/06/15 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
项目转让协议书
2014/10/27 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL