Vue Element中实现自定义表单验证及后端接口验证

简介：
本教程详解如何在Vue Element环境中开发自定义表单验证功能，并介绍与后端接口进行数据校验的方法。 在做一个Vue项目的时候遇到了一个需求，在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值。 模板代码如下： ```html ``` 引入的接口为： ```javascript import { checkUseridRepeat } from @api/user ``` 验证规则如下： ```javascript data: () => { var validateUserid = (rule, value, callback) => { if (!value) { return new Error(账户是必填项); } // 调用接口校验是否有重复值 checkUseridRepeat(value).then(response => { if (response.data.repeat) { // 假设返回数据中有一个repeat字段表示是否重复 callback(new Error(该账户已存在)); } else { callback(); } }).catch(error => { console.log(请求失败, error); }); }; } ```