vue中input失去焦点时验证输入的数据是否存在

做vue项目的时候遇到了一个需求，在验证某个表单项时不仅需要是必填项而且要去通过接口校验输入的数据是否存在

1、给表单加:rules="rules"，并且在data里面设置rules

rules: {
   name:[{required: true,message: '该项为必填项'},
      {trigger: 'blur',validator: checkValueNameIfExist}
     ],
}

 2、定义checkValueNameIfExist，并调用验证方法。

 data() {
    var checkValueNameIfExist = (rule, value, callback) => {
         if (value) {
          this.validateHas(value);//验证方法
          }
          callback();
        };
      return {}

     }

methods：{
  validateHas(value) {
        //从后台接口获取数据，把name传过去，如果res不为空则存在
        let param = {
           name:value,
          };
           this.$api.getDetailByName(param).then((data) => {
            let res = data.data.data
            res = JSON.parse(JSON.stringify(res));
            if (res == null) {
               this.$message.error('名称不存在')
            }
          })
      },

}