vue+elementUI輸入框調用接口校驗

html： :rules="{required: true, message: '請輸入名稱',validator: valiDuplicate, trigger: 'blur'}"

            <el-form-item
              label="名稱"
              prop="name"
              class="is-required"
              :rules="{required: true, message: '請輸入名稱',validator: valiDuplicate, trigger: 'blur'}"
            >
              <el-input v-model="form.name" :readonly="readonly" :disabled="readonly" />
            </el-form-item>

校驗：

 methods: {
    valiDuplicate(rule, val, callback) {
      this.duplicateCheck(val).then(res => {
        if (res.result) {
          callback()
        } else {
          if (val) {
            rule.message = '該名稱已存在！'
          }
          callback(new Error())
        }
      })
    }
}

校驗進一步優化（空值不調用接口，避免頻繁調用接口）：

 valiDuplicate(rule, val, callback) {
      // 如果沒有輸入任何東西，不調用接口
      if (!val) {
        callback(new Error())
        return false
      }
      this.duplicateCheck(val).then(canUse => {
        if (canUse) {
          callback()
        } else {
          rule.message = '該疾病名稱已存在！'
          callback(new Error())
        }
      })
    },

調用接口

    // 名稱調用接口查重
    duplicateCheck(name) {
      return new Promise(resolve => {  // 關鍵
        apiModel.duplicateCheck(
          {
            name: name,
            id: id
          }
        ).then(res => {
          if (res.code === HttpStatusCode.SUCCESS) {
            resolve(res)  // 關鍵 
          }
        })
      })
    },

。