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

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

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

template

引入接口

 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('已经存在，不能重复'))
               }
         })
        }
    }
    return {
       addrules: { // 新增表单校验
          userid: [
            { required: true, validator: validateUserid, trigger: 'blur' }
          ],        
        },
      }
  },