JavaScript表单验证开发

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

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

效果图：

/* 验证类型
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表单验证大全

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。