在vue中自己写的一个表单验证方法

为什么要写

因为当时项目里要进行可定制化的验证

用了策略模式

  1. 第一步 声明一个验证对象 需要验证的字段名为key 对应的value是数组 用来存放验证规则和对应的提示文字组成的对象 声明一个存放提示的对象
infoDto:{
    nameA:''
}
 validate: {
        name: [{ validator: val=>{return Boolean(val)}, msg: "请输入名称" }],
         other:[]
      }
  warningText:{

  }    
    
  1. 第二步,处理函数
   // 验证方法
    checkNotNull(
      val,
      vali = {
        dtoName: "infoDto",
        warningTxtName: "warningText",
        valiName: "validate" 
      },
      focus
    ) {
      
      let valiFlag = false; // 验证有问题->true
      // 输入的值
     
      let dtoVal;

      dtoVal = this[vali["dtoName"]][val];

      // 验证规则数组
      let validatorArr = this[vali["valiName"]][val];
      // 循环验证
      validatorArr &&
        validatorArr.some((element, index) => {
         
          // 验证不正确,跳出
          if (!element.validator(dtoVal)) {
            //  debugger;
            this.$set(this[vali["warningTxtName"]], val, element.msg);

           
            // 如果是非input元素 使用scrollIntoView定位 进行提示定位
            if (document.getElementById(`${val}`) && focus === "focus") {
             
              document.getElementById(`${val}`).scrollIntoView();
            }
            // }
            valiFlag = true;
            return true;
          }

          if (index === validatorArr.length - 1) {
            this.$set(this[vali["warningTxtName"]], val, "");
          }
        });
      //  debugger
      return valiFlag;
    }

参数包括对应的表单值的对象 上面的验证对象 以及存放提示数据的对象 先根据参数传的所需验证的值的name 找到其对应验证数组 再在表单对象里根据name找到value 使用数组的some函数对value进行验证 有问题的话 将对应提示文字塞到提示对象中去。

3.第三步 根据warningText里的值 加上错误的样式和文字