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

上一篇:C语言回调函数


下一篇:js回调函数(callback)