惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
V2EX
IT之家
IT之家
博客园 - 叶小钗
雷峰网
雷峰网
T
Tailwind CSS Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
S
SegmentFault 最新的问题
Apple Machine Learning Research
Apple Machine Learning Research
爱范儿
爱范儿
博客园 - 【当耐特】
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
大猫的无限游戏
大猫的无限游戏
Last Week in AI
Last Week in AI
月光博客
月光博客
酷 壳 – CoolShell
酷 壳 – CoolShell
Jina AI
Jina AI
博客园 - Franky
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
宝玉的分享
宝玉的分享
阮一峰的网络日志
阮一峰的网络日志
Hugging Face - Blog
Hugging Face - Blog
博客园 - 司徒正美

时间的朋友

Windows 命令行密码重置 Anaconda安装 typescript 注解解读1 Konvajs Shape加载自定义图片 sshpass 使用 why-is-node-running webgl笔记 SharedArrayBuffer is not defined blender 常用快捷键 | 时间的朋友 vue -- v3.4commit提交记录2 vue2 升级vue3报错问题整理 着色器 expressjs 源码 hyper-V arch linux 网络配置 element input数字格式化 three 拼接货架 WebAudio笔记 Windows nginx重启bat脚本 vue -- v3.4commit提交记录 URI malformed vue3 -- Class 对象在组件中使用范例 | 时间的朋友 ruby 安装和升级 element-plus 老版本cascader使用卡死问题 vue3 内置Transition组件 | 时间的朋友 前端memo的实现 | 时间的朋友 Vue -- vue-class-component源码 | 时间的朋友 linux 优化脚本 typescript 装饰器 | 时间的朋友 microbundle 源码 | 时间的朋友 WSL2问题解决WslRegisterDistribution failed with error: 0x800701bc
elementui form多表单验证 | 时间的朋友
2022-08-17 · via 时间的朋友

Published: · LastMod: August 18, 2022 · 160 words

多表单验证 🔗

页面中存在多个表单验证时,要验证多个表单是否完整就比较费劲

平时业务中验证都是这样的回调形式

1
2
3
this.$refs.form1.validate((valid) => {
  // ....
});

重新写个高阶函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const validateForms = (...args) => {
  return Promise.all(
    args.map(
      (form) =>
        new Promise((r, j) =>
          form && typeof form.validate === "function"
            ? form.validate((v) => (v ? r() : j()))
            : j()
        )
    )
  );
};

业务代码

1
2
3
4
5
6
7
8
validateForms(
  this.$refs.form1,
  this.$refs.form2,
  this.$refs.form3 // ...多个form实例
).then(() => {
  // code
  // 具体全部验证后的代码
});