element ui自定义表单验证(输入框只能输入负整数、0、正整数，并且一个数字之间使用英文逗号隔开，最大不能超过365，最小不能低于-365)，并与select下拉框联动

使用场景：

element ui自定义表单验证，输入的内容限制只能是数字，包括负整数、正整数和0，每个数字之间只能用英文逗号隔开，每一个输入框只允许输入5个数字，并且输入的数字最大不能超过365和最小不能小于-365

还有一个条件是需要根据select下拉框限制输入的数字，分别有三个条件：条件一，-365-365之间的数字都可以输入，条件二就只能输入0-365之间的数字，条件三只能输入0

---

问题描述

当时看到这个需求的时候，头皮发懵，在网上搜了许多的方法，刚开始是写的一个方法，插入到rules的验证规则，然后在与select下拉框联动，分别设置验证条件，这样可以实现大致的验证

changeStrategyType(value) {
      console.log(value, '下拉框改变事件')
      this.formRules['taskNode'] = []
      let pt = ''
      let msg = ''
      if (value === 1) {
        // 条件一
        msg = '条件一输入内容不符合规范'
        // pt = /^(?:0+(,\d+)*|(?:-?[1-9]\d*)+(,\d+)*)$/
        pt = /^(?:0+(,\d+)*|(?:-?[1-9]\d*)+(,\d+)*)$/
      } else if (value === 2) {
        //条件二
        msg = '输入范围应该>=0'
        pt = /^(?:0+(,\d+)*|([1-9]\d*)+(,\d+)*)$/
      } else if (value === 3) {
        //条件三
        msg = '输入范围应=0'
        pt = /^([0])$/
      }
      this.formRules['taskNode'].push({ required: true, message: msg, pattern: pt, trigger: 'blur' })
    }

但是这样写的问题也就来了：
1.在验证条件一的时候，我只要连续输入两个负数或者内容里面出现了两个负数，验证就会不通过
2.不好限制输入框输入的数字长度为5个
3.不好验证是否出现了输入同样数字的验证
4.不好限制输入的最大值和最小值

---

解决方案：

在出现了上面的几个问题之后，我想到了还是利用自定义的表单验证的方法，然后将输入框输入的内容转换成为一个数组，利用数组的方法检验输入的内容长度、输入内容是否相同，以及输入的最大值和最小值！
（数组yyds！！！）

const validateTasknode = (rule, value, callback) => {
      let arr = []
      let string = value
      arr =string.split(",")
      if (!value) {
        callback(new Error('输入内容不为空'))
      } else {
        if (this.formData.strategyType === '') {
          callback(
            new Error('请先选择条件类型')
          )
        }else{
          if(this.formData.strategyType === 1){
            let val = /^((\-?\d+)(?!,\2(,|$)))(,(\-?\d+)(?!,\5(,|$)))*$/
            if(!val.test(value)){
              callback(new Error('条件一输入不符合规范'))
            }
          }else if(this.formData.strategyType === 2){
            let val = /^(?:0+(,\d+)*|([1-9]\d*)+(,\d+)*)$/
            if(!val.test(value)){
              callback(new Error('条件二输入范围应>=0'))
            }
          }else if(this.formData.strategyType === 3){
            let val = /^([0])$/
            if(!val.test(value)){
              callback(new Error('条件三输入范围应=0'))
            }
          }
          if(arr.length > 5){
              callback(new Error('最多只能输入5个数字'))
            }
          for(let i=0;i<=arr.length;i++){
            if(arr[i] > 365){
              callback(new Error('最大不能超过365'))
            }else if(arr[i] < -365){
              callback(new Error('最小不能超过-365'))
            }
            for(let j=i+1;j<=arr.length;j++){
              if(arr[i] === arr[j]){
                callback(new Error('不能存在两个相同的数字'))
              }
            }

          }
        }
        callback()
      }
    }

针对条件一的解决方案就是重新优化了正则表达式

参考博客：https://www.jianshu.com/p/61d69bbf9bea