原生js设计表单验证插件的思路分析

原生js设计表单验证插件的思路分析

技术杂谈小彩虹2021-08-17 22:36:24220A+A-
这几天在做一个用原生js写的项目,需要用到表单验证的功能。因为之前公司项目中的表单验证是写在业务里的,改起来特别的麻烦,就想自己写一个表单验证的小工具。本来想在网上找一个教程研究研究的,但没找到太好的,最后决定自己研究吧。文中示例的代码都是我自己写的demo,并没有参考一些框架或者库的源码,所以代码可能比较难看, 重点还是分析一下思路,后期我会把完善好的代码发到github上。

原则:

先说一下我自己写的表单验证工具的思路或者是原则吧:

  • 验证代码和业务代码分离
  • 扩展性强
  • 验证规则和验证逻辑分离

第一点没什么可说的,一般的工具都是这样做的,而且自己也吃了不少高耦合的亏,所以我还是把它放出来了。我这个工具希望达到的目的是,开发者只需要关注哪些数据需要验证,将数据传入给工具直接获得验证结果,让开发者更多的关注其他的业务。

第二点是希望开发者可以自定义验证规则,毕竟内置的规则再多,也架不住一个奇葩需求。

第三点是验证规则和验证逻辑的分离,其实这一条更多的是为第二条服务的。

验证逻辑


这张流程图就是我这个工具验证逻辑,最开始判断的传入值是否可以为空,如果可以为空再去验证是否有其他的验证规则,如果没有就直接验证通过了(一般来说,如果表单的值可以为空,大部分情况不会再存在其他规则了)。假如还有其他的验证规则,就去循环验证,一旦有一条规则没通过,就算验证失败。

如果说输入的内容不可以为空,就去循环验证这些规则就好了,和上面同理,一旦有错就算验证失败。

class Vaildation{}

这就是验证工具的类,我们先不着急往下写,先思考到底往类中传什么配置参数。

let vaild = [
  {
    value:this.username,
    type: "用户名",
    rules:[
      "isDefine", 
      {
        name:"limit",
        check: true,
        min:5,
        max:12
      }
    ]
  },
  {
    value:this.password,
    type: "密码",
    rules:[
      "isDefine", 
      {
        name:"mix",
        check:true,
      },
      {
        name:"limit",
        check: true,
        min:5,
        max:12
      }
    ]
  }
];

这是我想传到类中的配置(如果你自己想设计一个的话也可以用别的样式,数据、对象都可以),它是一个数组,里面包含了每一个需要验证的对象,简单介绍一下配置中的属性:

value: 需要认证的数据的值,类型是string或者number
type:  传入这个数据的名称或者标签,比如用户名、密码、邮箱或者电话等,类型是字符串或者数组
rules: 需要使用哪些验证规则,类型是array。

rules有两种写法,一种是简写比如:['isDefine', 'limit'],意思是不能为空,且有字数限制,使用默认
的规则;
也可以自定义具体的规则比如:['isDefine', {name: limit, check:true, min:5, max:12}], check参数
的意思是使规则生效,如果你写成false即使你写上这个规则也不会生效,min和max就好理解了,就是限制具体的
字数,默认的是6-16个字符。

让我们接着回到类的设计中:

class Vaildation{
  constructor(){    
    this.isCheck = false;    
    this.vaild_item = [];    
    this.vaild;  
  }
}

isCheck: 验证是否通过,类型是布尔值
vaild_item: 存放我们传入类中的参数
vaild: 验证成功或失败时返回的消息

接下来,让我们来设计验证规则rules:

class Vaildation{
  constructor(){    
    ......  
  }  
  rules(){    
    return {      
      mix: (vaild) => {        
        for(let i = 0; i < vaild.rules.length; i++){          
          if(vaild.rules[i] == "mix" || vaild.rules[i].name == "mix"){            
            if(vaild.rules[i].check){              
              if(!vaild.rules[i].newRules){                
                return new RegExp(/^[a-zA-Z0-9]*([a-zA-Z][0-9]|[0-9][a-zA-Z])[a-zA-Z0-9]*$/).test(vaild.value);               
              }else{                
                return new RegExp(vaild.rules[i].newRules).test(vaild.value);              
              }            
            }else{              
              return true;            
            }          
          }       
        }      
      },      
      limit: (vaild) => {        
        let min;        
        let max;        
        vaild.rules.forEach((item) => {          
          if(item == "limit" || item.name == "limit"){            
            min = item.min || 6;            
            max = item.max || 16;          
          }        
        })        
        if(vaild.value.length < min || vaild.value.length > max){          
          return false;        
        }else{          
          return true;        
        }      
      },      
      isDefine: (vaild) => {        
        return !!vaild.value.trim();      
      },    
    }  
  }
}

rules方法中返回了一个规则对象,我这里内置了两个规则:

一个是"mix",规定输入的内容是数字和字母的混合;

另一个"limit",规定输入内容字符数量的限制;

它们的参数是之前配置数组中的rules属性的值,即["isDefine", "mix", "limit"],我们可以看到这些规则是支持传入字符串或者是对象的,传入对象时还可以做一些额外的配置,比如当我们有一些奇葩需求比如“输入的内容每隔3个字必须有一个字母(for god's sake,天杀的需求)”,我们可以在"mix"中加入新的正则表达式:

{  
  name:"mix",  
  check:true,
  newRules: 新的正则表达式,
},

当然,如果你有新的规则比如电话,邮箱之类的,你也可以在新建Vaildation实例后手动添加进去,方便自定义:

let vaildation = new Vaildation();
vaild.rules()[newRules] = function(vaild){
    //new Rules
}

有了规则,我们还需要错误提示,我这里每个规则的提示都使用了和规则一样的名称,方便处理验证逻辑时使用:

error(){
    return {
      mix: (vaild)=>{
        return vaild.type + "必须为字母和数字组合";
      },
      limit: (vaild) => {
        let min;
        let max;
        vaild.rules.forEach((item) => {
          if(item == "limit" || item.name == "limit"){
            min = item.min || 6;
            max = item.max || 16;
          }
        })
        return vaild.type + "位数为" + min + "-" + max + "位";
      },
      define: (vaild) => {
        return vaild.type + "不能为空";
      }
    }
  }

处理错误的时候我们就用到配置中的type属性了,当然也可以直接在error中写死错误处理的文案,这些都无所谓拉。

最后我们要看的是验证的逻辑处理:

check_result(check, err = null){    
  return {      
    check: check, //验证是否为空 
    err: err, //验证失败时的文案 
  } 
}

check(){
  for(let i = 0; i < this.vaild_item.length; i++){
    //循环每一个配置
    let vaild = this.vaild_item[i].rules.findIndex(function(val){
      //查找是否有isDefine规则
      return val === "isDefine";
    });
    if(vaild > -1){
      let rules_arr = this.vaild_item[i].rules;
      //如果存在isDefine规则,就把它去除,去处理剩下的规则
      rules_arr.splice(vaild,1);
      if(rules_arr.length > 0){
        for(let j = 0; j < rules_arr.length; j++){
          for(let o in this.rules()){
            if(rules_arr[j]['name'] == o && !this.rules()[rules_arr[j]['name']].call(this,this.vaild_item[i])){
              //将传入的配置规则和类中自带的规则进行匹配,如果匹配上并且匹配失败,返回验证信息 
              this.vaild = [this.check_result(false,this.error()[rules_arr[j]['name']].call(this,this.vaild_item[i]))];
              this.isCheck = false;
              return this.vaild;
            }else{
              this.isCheck = true;
              this.vaild = [this.check_result(true)];
            }
          }
        }
      }
    }else{
      if(this.vaild_item[i].rules.length > 0 && !!this.vaild_item[i].value){
        let rules_arr = this.vaild_item[i].rules;
        for(let j = 0; j < rules_arr.length; j++){
          //这部分处理逻辑和上面相同 
          for(let o in this.rules()){
            if(rules_arr[j]['name'] == o && !this.rules()[rules_arr[j]['name']].call(this,this.vaild_item[i])){
              this.vaild = [this.check_result(false,this.error()[rules_arr[j]['name']].call(this,this.vaild_item[i]))];
              this.isCheck = false;
              return this.vaild;
            }else{
              this.isCheck = true;
              this.vaild = [this.check_result(true)];
            }
          }
        }
      }
    }
  }
  return this.vaild;
}

check方法是核心逻辑,实际上就是上面流程图的内容,一些重要的地方我也备注了(实在抱歉,这部分代码写的有点儿丑,demo...demo...)。

最后我来展示一下这个工具用起来大概是什么样子的:

//配置文件
let vaild = [
  {
    value:this.username,
    type: "用户名",
    rules:[
      "isDefine", 
      {
        name:"limit",
        check: true,
        min:5,
        max:12
      }
    ]
  },
  {
    value:this.password,
    type: "密码",
    rules:[
      "isDefine", 
      {
        name:"mix",
        check:true,
      },
      {
        name:"limit",
        check: true,
        min:5,
        max:12
      }
    ]
  }
];

let vaildation = new Vaildation(); //新建一个Vaildation实例
vaildation.check_items = vaild;  //将配置传给实例中的check_items
let result = vaildation.check(); //ok,你已经拿到结果了

//噢,别忘了可以在result.check或者vaildation.isCheck中拿到是否成功的结果

这篇文章仅仅是我设计这个工具时的一个思路,可能还存在一堆问题,就先抛砖引玉一下,也希望大家能多多指正,最后感谢大家的收看。


点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们