element中async-validator异步请求验证使用 - 网站

element中async-validator异步请求验证使用

分类:Vue.js 教程 · 发布时间:2023-10-30 06:23 · 阅读:6793

本文主要介绍了element中async-validator异步请求验证使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

异步请求验证

Attention: asyncValidator 是1.11.0 才支持的,而我下文的结论源于我自己使用了1.8.0 的版本,故而失败,请知悉!!
参考github 项目:async-validator

// PROMISE USAGE validator.validate({ name: "muji", asyncValidator: (rule, value) => axios.post('/nameValidator', { name: value }), }, (errors, fields) => { if(errors) { // validation failed, errors is an array of all errors // fields is an object keyed by field name with an array of // errors per field return handleErrors(errors, fields); } // validation passed }) .then(() => { // validation passed }) .catch(({ errors, fields }) => { return handleErrors(errors, fields); })

如上readme 中一直说使用asyncValidator, 所以一直以为接收asyncValidator作为关键字,结果试了很久就是不行。其实还是使用validator关键字就行。具体使用如下就行…

使用定义

validatorFieldRule: [ { required:true, validator: checkEmpty, trigger: "change"} ]

验证规则定义

var checkEmpty= (rule, value, callback) => { axios.get('/api/file').then( res => { callback(); }) .catch( err => { callback(err); }) };

到此这篇关于element中async-validator异步请求验证使用的文章就介绍到这了,更多相关element async-validator异步请求验证内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站!

标签:
element async-validator 异步请求验证

相关文章

vue加载视频流,实现直播功能的过程

这篇文章主要介绍了vue加载视频流,实现直播功能的过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue2项目升级到Vue3的详细教程

看到好多开源项目都升级了vue3,下面这篇文章主要给大家介绍了关于Vue2项目升级到Vue3的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

解决v-model双向绑定失效的问题

这篇文章主要介绍了解决v-model双向绑定失效的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue面试必备之防抖和节流的使用

在这篇文章中,大家会了解到如何在 Vue 组件中使用防抖和节流控制 观察者(watchers)以及事件处理程序,文中的示例代码简洁易懂,希望对大家有所帮助

Vue浅拷贝和深拷贝实现方案

在理解浅拷贝和深拷贝浅前,必须先理解基本数据类型和引用数据类型的区别,这篇文章主要介绍了Vue浅拷贝和深拷贝实现方案及区别对比分析,需要的朋友可以参考下

返回分类 返回首页