如何实现Vue Element UI中自定义表单验证并请求后端接口验证？

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

在使用Vue项目开发过程中，遇到一个需求，需要在一个表单中不仅要求必填某项，还要验证通过接口校验是否存在重复值。具体实现如下：

这里使用了Element UI的表单项组件`el-form-item`，并为其添加了`label`和`prop`属性来指定标签和表单项的名称。通过`rules`属性定义了校验规则，其中包括了必填的验证以及自定义的校验函数，用于验证值是否重复。

做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' } ], }, } },

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