element ui form表单验证遇到的问题（正则验证）

需求

• oss路径不允许为空
• oss路径必须以oss://开头（固定输入oss://或 报错提示）
• oss路径结尾不能有/（直接把/替换或 报错提示）
• 若传输类型为文件，则只能传输zip，tar，tar.gz三种格式文件（判断路径结尾字符）
• 若传输类型为目录，则不能传输zip，tar，tar.gz三种格式文件（总觉得应该是不能传输文件）
  

问题描述

参考我前面的文章element form 中的常用验证,验证写法如下：

发现无法获取form表单里面的内容,排查发现是因为this指向的是validator这个函数。

问题解决

参考官网的密码二次验证案例，把验证规则抽离到data中即可：

 data() {
    var checkOssPath = (rule, value, callback) => {
      let regexStart = /(?<=s3:\/\/)/;
      if (!regexStart.test(value)) {
        callback(new Error("oss路径必须以‘s3://’开头且末尾不要‘/’"));
      }
      let regexEnd = /\/$/;
      let regexFiel = /\.(zip|tar|tar\.gz)$/;
      if (regexEnd.test(value)) {
        callback(new Error("oss路径末尾不要‘/’"));
      } else {
        if (this.form["transfer_task_type"] == "文件") {
          if (!regexFiel.test(value)) {
            callback(new Error("仅允许zip，tar，tar.gz三种文件格式"));
          }
        } else {
          if (regexFiel.test(value)) {
            callback(new Error("目录不应为zip，tar，tar.gz文件格式"));
          }
        }
      }
      callback();
    };
    var checkAwsPath = (rule, value, callback) => {
      let regexStart = /(?<=aws:\/\/)/;
      if (!regexStart.test(value)) {
        callback(new Error("aws路径必须以‘aws://’开头且末尾不要‘/’"));
      }
      let regexEnd = /\/$/;
      if (regexEnd.test(value)) {
        callback(new Error("aws路径末尾不要‘/’"));
      }
      callback();
    };
    return {
      form: {
        transfer_task_type: "",
        oss_file_path: "",
        aws_file_path: ""
      },
      DataTransmissionRules: {
        transfer_task_type: {
          required: true,
          message: "请选择",
          trigger: "blur"
        },
        oss_file_path: {
          required: true,
          trigger: "blur",
          validator: checkOssPath
        },
        aws_file_path: {
          required: true,
          trigger: "blur",
          validator: checkAwsPath
        }
      }
    };
  },