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

 更新时间:2023年05月04日 09:07:52   作者:zsy_1991  
本文主要介绍了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异步请求验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    这篇文章主要介绍了vue在项目中使用百度地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

    基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

    基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率。这篇文章主要介绍了基于Vue-Cli 打包自动生成/抽离相关配置文件 ,需要的朋友可以参考下
    2018-12-12
  • 如何在Vue.JS中使用图标组件

    如何在Vue.JS中使用图标组件

    这篇文章主要介绍了如何在Vue.JS中使用图标组件,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08
  • vue实现批量下载文件

    vue实现批量下载文件

    这篇文章主要为大家详细介绍了vue实现批量下载文件的方法(不走后端接口的方法),文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • Element-plus使用中遇到的问题小结

    Element-plus使用中遇到的问题小结

    表格数据是websocket通信获取的数据,首次获取20条数据,以后新增订阅获取一条,新增一条则向上滑动显示最新数据,本文给大家介绍Element-plus使用中遇到的问题小结,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • Vue2.0+ElementUI+PageHelper实现的表格分页功能

    Vue2.0+ElementUI+PageHelper实现的表格分页功能

    ElementUI也是一套很不错的组件库,对于我们经常用到的表格、表单、时间日期选择器等常用组件都有着很好的封装和接口。这篇文章主要介绍了Vue2.0+ElementUI+PageHelper实现的表格分页,需要的朋友可以参考下
    2021-10-10
  • vue函数input输入值请求时延迟1.5秒请求问题

    vue函数input输入值请求时延迟1.5秒请求问题

    这篇文章主要介绍了vue函数input输入值请求时延迟1.5秒请求问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue实现验证码倒计时按钮

    vue实现验证码倒计时按钮

    这篇文章主要为大家详细介绍了vue实现验证码倒计时按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue引用js文件的多种方式(推荐)

    vue引用js文件的多种方式(推荐)

    这篇文章主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue权限问题的完美解决方案

    vue权限问题的完美解决方案

    今天来说说权限管理,因为网上已经有很多关于这方面的很多内容,下面这篇文章主要给大家介绍了关于vue权限问题的完美解决方案,需要的朋友们下面来一起学习学习吧
    2019-05-05

最新评论