vee-validate 管道符和正则表达式冲突

问题描述

我们配置一个正则，但是发现没有用，为啥呢？
-> https://qa.1r1g.com/sf/ask/3566856681/
v-validate指令接受一个字符串值，它是由管道 ( |)分隔的验证列表。由于管道也在正则表达式模式中使用（作为交替运算符），因此字符串命令无效。作为变通方法，传递一个对象而不是字符串值。

问题解决

按照上面的方法进行组织即可。

本人这里解决的方法本质也是如此，不过由于是低代码平台的搭建，这里v-validate绑定的数据是用户通过页面（用户输入数据+前端拼接+后端配置+前端处理）配置出来的，
还好这里有统一的组件包裹来使用 vee-validate 的 ValidationProvider组件，直接在这里搜索 regex 来重新组装成对象就可以。

vee-validate的ValidationProvider组件的rules规则
据观察，校验顺序在字符串时是按照前后顺序来的，在对象的时候是按照对象属性顺序来的。

// 组件中 
computed: {
    validateObj() {
      // fix: 正则中的 | 和 规则区分的 | 冲突问题
      if (
        typeof this.validate == 'string' &&
        this.validate.indexOf('regex') !== -1
      ) {
        let validateObj = {}
        let validate = new String(this.validate)
        const matchReg = this.validate.match(/regex:\/[^/]{0,}\//g) // 用// 来标记好正则表达式的位置
        if (matchReg && matchReg.length) {
          validate = validate.replace(matchReg[0], '')
          const validates = validate.split('|').filter(item => !!item)
          const regexIndex = this.validate.indexOf('regex')
          const regexParams = matchReg[0].substring(7, matchReg[0].length - 1)
          validates.forEach(config => {
            const valConfig = config.split(':')
            if (
              !validateObj['regex'] &&
              this.validate.indexOf(valConfig[0]) > regexIndex
            ) {
              validateObj['regex'] = regexParams
            }
            if (valConfig[1] && valConfig[1].indexOf(',') !== -1) {
              valConfig[1] = valConfig[1].split(',')
            }
            validateObj[valConfig[0]] =
              valConfig.length > 1 ? valConfig[1] : true
          })
          if (!validateObj['regex']) {
            validateObj['regex'] = regexParams
          }
          return validateObj
        }
      }
      return this.validate
    },
  },

// 拼接的时候
// fix: 正则中的 | 和 规则区分的 | 冲突问题时，加上 '//' 包裹
      if (key == 'regex' && value.indexOf('|') != -1) {
          value =
            (value[0] !== '/' ? '/' : '') +
            value +
            (value[value.length - 1] !== '/' ? '/' : '')
          validate = key + ':' + value
        }

// 后端处理
/* 获取转义后的json字符串*/
// 例如 =>表达式中有 \d 需要保留\ => \\d, 因为首选v-validate是使用字符串类型的校验
    public String toJsonStr(String str) throws IOException {
        if (StringUtil.isNotEmpty(str)) {
            return JSONUtil.toJson(str);
        }
        return "";
    }