vue+elementUI输入框调用接口校验

Posted 2021-06-03 几何柒期

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)  // 关键 
          }
        })
      })
    },

。