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

本文主要是介绍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)  // 关键 
          }
        })
      })
    },

。

这篇关于vue+elementUI输入框调用接口校验的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！