背景

ele-ui使用表单验证，需要调用接口判断是否是重名，重名则停留在当前页，否则就进行到下一页。

存在问题

使用普通的validate

  rules: {name: [{ required: true, trigger: ['blur', 'change'], message: '名称不能为空' },{ min: 1, max: 32, trigger: ['blur', 'change'], message: '名称最小长度1，最大长度32！' },{ pattern: /^(?=[a-z])([a-z0-9-]{0,31})([a-z0-9])$/, trigger: ['blur', 'change'], message: '名称格式错误' },{validator: (rule, value1, callback) => {let param = {name: value1}request('/url', 'GET', param).then((res) => {if (res.resultCode === 200) {callback(new Error('名称重复！'))} else {callback()}})},trigger: 'blur'}]}

校验代码

 this.$refs.form.validate((valid) => {if (!valid) {isError = true}
})

运行时，失焦状态下可以报错，但是点击下一步，则会直接跳转；

打了断点看，下一步的操作已经执行，但是校验还没有返回；

解决方法

使用async await完美解决

async validateForm () {let valid = await this.$refs.form.validate().catch((err) => {return err})return valid
},
isError = this.validateForm()

则可以完美解决

ele-ui表单验证，异步调用接口判断是否重名相关推荐

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
vant ui 表单验证不通过信息提示的消除
vant ui 表单验证不通过信息提示的消除在使用vant表单验正消除表单不通过的信息时候可以个van-form 标签里加个 :key="formKey" , 我有尝试过使用:k ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
LuLu UI表单验证
LuLu UI 一款很好用的UI 链接:https://l-ui.com/content/about/design.html 表单验证功能取消及时性: var elForm = $(form); va ...
Element UI——表单验证输入的数字检测出来是string解决方案
问题描述打印判断类型问题分析解决方案数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...
element ui表单验证
这里通过一个实例来说明表单验证: 如上图所示,我们点击"添加新用户"弹出弹框这里只讲弹框里面的校验代码: <template><div id="cre ...
element ui 表单验证通过后没有绿色框求解（已解）
使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...
element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息点击编辑框解决方法:添加表单重置验证我们可以通过为两个表单添加ref属性之后 ...
element ui表单验证，验证通过但是不进if(valid){}步骤
表单自定义验证,如图: data中定义的验证规则: var validatePass = (rule, value, callback) => {if (value === '') {retur ...

ele-ui表单验证，异步调用接口判断是否重名

背景

存在问题

解决方法

ele-ui表单验证，异步调用接口判断是否重名相关推荐

最新文章

热门文章