vue element自定义表单验证请求后端接口验证
人气:2做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' }
],
},
}
},
您可能感兴趣的文章:
- vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
- Vue中el-form标签中的自定义el-select下拉框标签功能
- vue elementui el-form rules动态验证的实例代码详解
- element-ui和vue表单(对话框)验证提示语(残留)清除操作
- vue+ElementUI 关闭对话框清空验证,清除form表单的操作
- Vue快速实现通用表单验证功能
- vue-form表单验证是否为空值的实例详解
- vue+elementui 对话框取消 表单验证重置示例
- vue+elementUI 复杂表单的验证、数据提交方案问题
- Vue+Element实现动态生成新表单并添加验证功能
- 使用vue自定义指令开发表单验证插件validate.js
- vue + el-form 实现的多层循环表单验证
加载全部内容