vue + element 自定义表单验证的时候 需要通过请求后端接口验证

vue + element 自定义表单验证的时候 需要通过请求后端接口验证

做vue项目的时候遇到了一个需求，在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值。

template

<el-form-item label="账户" prop="userid">
    <el-input v-model="addForm.userid"></el-input>
</el-form-item>

引入接口

 import { checkUseridRepeat } from '@/api/user'

校验

data: () => {
   var validateUserid = (rule, value, callback) => {
      if (value ===  '') {
        callback(new Error('必填'))
      } else {
          checkUseridRepeat().then(response => {
            if ( response.code === '1') {
                  callback(new Error('已经存在，不能重复'))
               } else {
                callback()
            }
         })
        }
    }
    return {
       addrules: { // 新增表单校验
          userid: [
            { required: true, validator: validateUserid, trigger: 'blur' }
          ],        
        },
      }
  },