admin管理员组

文章数量:1130349

ele

背景

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

背景

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