element-ui + vue 自定义校验规则（新增编辑）

data(){
    const urlKeyRules = (rule, value, callback) => {
      let channelList = this.channelList;
      if (this.formData.channelId) {
        // 编辑时校验
        channelList = this.channelList.filter(
          (item) => item.channelId !== this.formData.channelId
        );
      }
      channelList.map((i) => i.urlKey).includes(value)
        ? callback(new Error(value + "当前关键字已重复使用，请更换新的关键字"))
        : callback();
    };
}

value => 当前用户输入值

callback => 通过逻辑调用，这里使用的是map + includes；作用：拿出数组中urlkey组成新数组，用includes判断value在不在数组里面

methods:{
    你的回调函数(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("校验成功");
        } else {
          console.log("校验失败");
          return false;
        }
      });
    },
}

总结：先掌握自定义校验规则的使用方法，再按需求加自己的规则。可以去官网查看一些更细致的规则，放出一些常用的规则以备不时之需。

required: true, 必填吗？ true必填，false反之
message: '请输入活动名称', 提示文本
trigger: 'blur' 失去焦点触发校验
min: 3, max: 5, message: '长度在 3 到 5 个字符',