iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >Vue中如何使用ElementUi同时校验多个表单
  • 344
分享到

Vue中如何使用ElementUi同时校验多个表单

2024-04-02 19:04:59 344人浏览 安东尼
摘要

小编给大家分享一下Vue中如何使用ElementUi同时校验多个表单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码let&n

小编给大家分享一下Vue中如何使用ElementUi同时校验多个表单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

代码

let fORMArr=['formA','formB','formC','formD']//假设这是四个form表单的ref
var resultArr=[]//用来接受返回结果的数组
var _self=this
 function checkForm(formName) { //封装验证表单的函数
  var result = new Promise(function(resolve, reject) {
    _self.$refs[formName].validate((valid) => {
      if (valid) {
        resolve();
      } else { reject() }
    })
  })
  resultArr.push(result) //push 得到promise的结果
}
formArr.forEach(item => { //根据表单的ref校验
    checkForm(item)
 })
Promise.all(resultArr).then(function() { //都通过了
  alert('恭喜你,表单全部验证通过啦')
}).catch(function() {
  console.log("err");
});

以上是“Vue中如何使用ElementUi同时校验多个表单”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: Vue中如何使用ElementUi同时校验多个表单

本文链接: https://www.lsjlt.com/news/78733.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中如何使用ElementUi同时校验多个表单
    小编给大家分享一下Vue中如何使用ElementUi同时校验多个表单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码let&n...
    99+
    2024-04-02
  • vue3.0中使用elementUI表单遍历校验问题解决
    问题 在使用vue3.0写项目的时候遇到一个需要遍历的表单,可以增加删除表单对象 不考虑校验问题的话,就是简单的数组包form对象。涉及校验的时候,按照以往的写法就是绑定ref值,...
    99+
    2024-04-02
  • 基于Vue+elementUI如何实现动态表单的校验功能
    小编给大家分享一下基于Vue+elementUI如何实现动态表单的校验功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言开发...
    99+
    2024-04-02
  • vue 如何实现表单校验
    一、安装并使用 首先,在你的vue项目中进行安装: npm install --save vue-input-check 安装完成以后引入并注册: import in...
    99+
    2024-04-02
  • Vue怎么使用ElementUI对表单元素进行自定义校验
    今天小编给大家分享一下Vue怎么使用ElementUI对表单元素进行自定义校验的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。...
    99+
    2023-07-05
  • 使用ElementUI循环生成的Form表单添加校验
    目录ElementUI循环生成的Form表单添加校验HTML代码片段VUE中data中的声明效果图ElementUI循环动态生成表单校验问题ElementUI循环生成的Form表单添...
    99+
    2024-04-02
  • Vue Element-ui如何实现表单校验规则
    本篇内容介绍了“Vue Element-ui如何实现表单校验规则”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!目录前言规则校验的入门模式1、...
    99+
    2023-06-20
  • Vue.js+Nuxt.js项目中如何使用Vee-validate表单校验
    小编给大家分享一下Vue.js+Nuxt.js项目中如何使用Vee-validate表单校验,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了...
    99+
    2024-04-02
  • 如何使用JavaScript策略模式校验表单
    目录概述未使用策略模式的表单校验使用策略模式优化策略模式的优点总结概述 Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,...
    99+
    2024-04-02
  • 如何使用JavaScript进行表单校验功能
    这篇文章主要介绍如何使用JavaScript进行表单校验功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!文本框校验以下是文本框的校验步骤。1.获取待校验的文本框value值,2.对...
    99+
    2024-04-02
  • Vue中如何使用Validator表单验证插件
    这期内容当中小编将会给大家带来有关Vue中如何使用Validator表单验证插件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。基本使用<div id=&q...
    99+
    2024-04-02
  • 使用ajax怎么实现在提交时校验表单
    这篇文章给大家介绍使用ajax怎么实现在提交时校验表单,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。什么是ajaxajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据...
    99+
    2023-06-08
  • vue表单验证rules及validator验证器如何使用
    这篇文章主要介绍“vue表单验证rules及validator验证器如何使用”,在日常操作中,相信很多人在vue表单验证rules及validator验证器如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答...
    99+
    2023-07-02
  • JavaScript中如何完成注册页面表单校验
    这篇文章主要为大家展示了“JavaScript中如何完成注册页面表单校验”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中如何完成注册页面表单...
    99+
    2024-04-02
  • Vue的子组件props如何设置多个校验类型
    目录vue子组件props设置多个校验值Vue组件参数校验参数校验一参数校验二参数校验三总结vue子组件props设置多个校验值 1. type使用 | 进行隔开 props: { ...
    99+
    2023-03-11
    Vue子组件 Vue的props props设置校验类型
  • vue中如何使用elementUI表格动态行合并
    目录vue 使用elementUI表格动态行合并需求背景vue elementUI动态删除表格当前行内容具体步骤实现方法vue 使用elementUI表格动态行合并 需求背景 在开发...
    99+
    2022-11-13
    vue使用elementUI vue elementUI表格 elementUI表格动态行合并
  • vue如何实现同时设置多个倒计时
    这篇文章主要介绍vue如何实现同时设置多个倒计时,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下html如下:<div class="home"> &nb...
    99+
    2023-06-15
  • angular如何实现表单验证器验证的同时限制输入
    小编给大家分享一下angular如何实现表单验证器验证的同时限制输入,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!angular...
    99+
    2024-04-02
  • VUE-ElementUI时间区间选择器如何使用
    这篇文章主要介绍“VUE-ElementUI时间区间选择器如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“VUE-ElementUI时间区间选择器如何使用”文章能帮助大家解决问题。VUE-El...
    99+
    2023-06-30
  • Vue Element UI表单自定义校验规则及使用方法是什么
    这篇“Vue Element UI表单自定义校验规则及使用方法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来...
    99+
    2023-07-05
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作