vue element自定义表单验证请求后端接口验证

时间:2021-05-26

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章