Kros的博客 Kros的博客
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云

Kros

凡心所向,素履以往,生如逆旅,一苇以航
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云
  • CSS

  • JavaScript

  • 工具

  • Vue

    • vue批量引入组件
    • vue中watch用法
    • vue使用基础JSX语法
    • vue首页白屏
    • vue长列表优化
    • 模板文件中script、template、style存在必要性
    • popup弹窗组件
    • 使用$mount和extend扩展vue
    • 扩展toast合并popup(按需加载)
    • canvas实现弧形进度条
    • vue中使用CSS Modules
    • vue实现无限轮播图
    • vue半圆形菜单
    • 纯CSS实现圆形进度条
    • v-model简单实现
    • vue带箭头下拉框
    • vue事件修饰符
    • vue鼠标悬浮显示提示文字
    • vue添加发布版本号方法
    • vue配置全局样式文件
    • vue在env development中设置全局变量不生效
    • vue引入less或scss全局变量
    • vue中使用Keepalive
    • vue2为什么只支持一个根节点
    • vue打包优化分析工具—webpack-bundle-analyzer
    • vue使用echarts(按需加载)
    • echarts柱形图重合堆叠
    • vue使用draggable实现多列拖拽(解决空列不能拖拽问题)
    • vue禁止三方库打包到bundle中
    • npm run serve运行背后的思考
    • vxe-table树结构不允许insert
    • vue组件延迟加载
    • 多页面应用配置
    • vue项目常用优化
    • vue实现拖动拼图验证码
    • vue虚拟dom
    • canvas心形动画
    • canvas绘制玫瑰曲线
    • element表单validateField验证部分字段
    • element日期选择限制今天以后并精确到小时
    • 前端使用JSEncrypt和node-rsa进行rsa加密传输和接收解密
    • elementui日期选择器生日只选择月和日不选择年并隐藏年份
    • el-upload组件第二次点击手动submit时不生效
    • element表单内输入框使用@keyup enter native回车时会刷新页面
  • antdv踩坑记录

  • Vue3

  • 前端
  • Vue
kros
2023-10-26

element表单validateField验证部分字段

elementui表单校验指定字段时,每个字段的结果都会执行一次回调,如下:

const fields = ['name', 'phoneNum', 'idNum']
this.$refs.form.validate(fields).then(valid => {
  console.log(valid)
})
1
2
3
4

结构

这里会打印每个字段的校验结果,但通常我们是要得到一个结果再进行后续处理,所以这里需要对调用验证的过程进行处理。可以看到validate函数返回的是Promise,那么我们可以使用Promise.allapi来来对三个字段结果进行统一处理,如下:

function test {
  const fields = ['name', 'phoneNum', 'idNum']
  // 利用Promise.all方法,校验部分字段
  const res = Promise.all(fields.map(field => {
    return new Promise((resolve, rject) => {
      this.$refs['form'].validateField(field, (errMsg) => {
        resolve(errMsg)
      })
    })
  })).then(errMsgs => {
    console.log('Promise.all', errMsgs)
    if (errMsgs.every(msg => !msg)) {
      console.log('通过')
    }
  })
  if (res.every(r => r)) {
    // doSomething
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
上次更新: 2025/09/05, 8:09:00
canvas绘制玫瑰曲线
element日期选择限制今天以后并精确到小时

← canvas绘制玫瑰曲线 element日期选择限制今天以后并精确到小时→

最近更新
01
Find the next perfect square
09-05
02
Regex validate PIN code
09-05
03
Find the odd int
09-05
更多文章>
Theme by Vdoing | Copyright © 2020-2025 kros king
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
icon-heart-o icon-heart icon-infinity icon-pause icon-play link next prev