如何将Vue Element自定义表单验证与后端接口验证结合实现？

本文共计237个文字，预计阅读时间需要1分钟。

在开发Vue项目时，遇到了一个需求，验证某个表单项时，不仅需要必填项的校验，还需通过接口校验是否存在重复值。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。