elementui异步后台校验表单,修改重复校验
时间: 2023-10-25 22:11:15 浏览: 91
javascript将异步校验表单改写为同步表单
对于 ElementUI 表单的异步后台校验,可以使用 `async-validator` 库进行处理。针对修改时的重复校验,可以在表单的 `rules` 属性中添加一个自定义验证规则,如下所示:
```javascript
{
validator: async (rule, value, callback) => {
// 判断是否有修改
if (value !== this.form.name) {
// 发送异步请求,判断该名称是否已存在
const { data } = await axios.get('/api/checkName', { params: { name: value } })
if (data.code === 0) {
callback()
} else {
callback(new Error('名称已存在'))
}
} else {
callback()
}
},
message: '名称已存在'
}
```
其中,`validator` 属性值是一个异步函数,它接收三个参数:验证规则对象 `rule`、当前表单项的值 `value` 和回调函数 `callback`。在函数中,我们首先判断是否有修改,如果没有修改直接调用回调函数 `callback()` 表示验证通过,否则发送异步请求,判断该名称是否已存在。如果名称不存在,调用回调函数 `callback()` 表示验证通过,否则调用回调函数 `callback(new Error('名称已存在'))` 表示验证不通过,并传递错误信息给表单组件。
将上述验证规则添加到表单中即可实现修改时的重复校验。
阅读全文