element-ui表单仅对el-form表单的部分字段/某个字段进行验证

2023-10-30

根据elementui文档,查询到validateField方法,可以给表单的某个字段添加校验

在这里插入图片描述

对表单单个字段进行校验


            data: {
                rules: {
                    email: {
                        required: true,
                        message: '请输入邮箱',
                        trigger: ['change', 'blur']


 methods: {
                validateEmail(formName) {
                    this.$refs[formName].validateField('email', emailError => {
// 2种情况:emailError ='请输入邮箱'或者emailError =''(所以返回值为空时,验证通过。返回值非空时,验证失败)
                        if (!emailError) {
                            alert('邮箱验证通过!');
                        } else {
                            console.log('邮箱验证失败');
                            return false;
                        }
                    });
 
                },

如果只是对表单的某个字段进行重新校验,可简化为:

 this.$refs.dialogFormRefName.validateField('name', ErrorMsg => {})

对多个字段进行校验


            data: {
                rules: {
                    name: {
                        required: true,
                        message: '请输入姓名',
                        trigger: ['change', 'blur']
                    },
                    email: {
                        required: true,
                        message: '请输入邮箱',
                        trigger: ['change', 'blur']
                    }
                }
	  let count = 0
      const updateArr = ['email', 'name']
      let isAllowNext = false // 是否允许下一步
      updateArr.forEach(item => {
        this.$refs.dialogForm.validateField(item, errorMsg=> {
          // 返回值为空时,验证通过;返回值非空时,验证失败
          if (errorMsg) return
          // 如果某个字段校验通过则计数+1
          ++count
        })
      })
      // 如果当前表单必填项通过的数量与需要必填的数量相等,则进入下一步
      count === updateArr.length ? isAllowNext = true : ''
      if (isAllowNext) {
        alert('必填字段均通过校验,允许进入下一步!')
      }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element-ui表单仅对el-form表单的部分字段/某个字段进行验证 的相关文章

随机推荐

  • 移动OneNet——创建和调试

    进入Onenet官网 然后在控制台 创建产品 并在产品下创建设备 一 创建产品 选择多协议接入产品 然后创建一个MQTT协议的产品 创建产品界面参考如下 注意 务必选择MQTT协议 创建完毕后 我们点击查看具体的产品信息 注意 需要记录产品
  • 案例:规则引擎Drools解决汽水问题

    喝汽水问题 1 元钱一瓶汽水 喝完后两个空瓶换一瓶汽水 问 你有50元钱 最多可以喝到几瓶汽水 不能借空瓶 呵呵无商不奸 answer 如果有超过一元钱 则买一瓶汽水喝 此时 钱减少一元 同时拥有的空瓶增加一个 如果拥有至少两个空瓶 则两个
  • 把windows系统的默认编码改成UTF-8

    对于开发人员来说windows的编码的确是神一般的存在 windows老版本语言编码实际上是ascii和gbk编码混用 因此经常乱码 现在UTF 8国际化流行的阶段 windows这么多年 不知道耽误了多少程序员 老朱是linux服务器 数
  • Python数据分析库pandas ------ merge、concatenation 、pd.concat、combine_first、stack、unstack(0)、pivot、drop;合并...

    对于合并操作 熟悉SQL的读者可以将其理解为JOIN操作 它使用一个或多个键把多行数据 结合在一起 事实上 跟关系型数据库打交道的开发人员通常使用SQL的JOIN查询 用几个表共有的引用 值 键 从不同 的表获取数据 以这些键为基础 我们能
  • Java架构直通车——过滤器、拦截器、AOP的区别

    文章目录 过滤器 拦截器 AOP 面向切面 三者使用场景 过滤器 过滤器拦截的是URL Spring中自定义过滤器 Filter 一般只有一个方法 返回值是void 当请求到达web容器时 会探测当前请求地址是否配置有过滤器 有则调用该过滤
  • Vue F11监听切大屏

    用Datav插件做大屏可视化时 有一个全屏需求 我的想法是监听F11键 然后触发浏览器的大屏功能API 百度一下 竟有插件 大喜 插件的好处大家都知道 时间熬出来的 并且BUG极少 代码精简 做了全浏览器兼容 Rec 0001 步骤 1 插
  • 【性能测试】Jenkins+Ant+Jmeter自动化框架的搭建思路

    前言 前面讲了Jmeter在性能测试中的应用及扩展 随着测试的深入 我们发现在性能测试中也会遇到不少的重复工作 比如某新兴业务处于上升阶段 需要在每个版本中 对某些新增接口进行性能测试 有时还需要在一天中的不同时段分别进行性能测试 如果一味
  • idea启动项目很久很慢的一种解决方案

    一 问题描述 IntelliJ idea 在启动项目时 很久很慢 二 解决 在不买个更强更贵的前提下 有以下一种解决方案 1 方案依据 一般地 JVM实例默认最大堆内存是机器的1 64 在启动时会不断地fullGC 不断的申请内存 所以我们
  • FreeBSD SSH配置详解

    ssh config和sshd config都是ssh服务器的配置文件 二者区别在于 前者是针对客户端的配置文件 后者则是针对服务端的配置文件 两个配置文件都允许你通过设置不同的选项来改变客 户端程序的运行方式 下面列出来的是两个配置文件中
  • 【STM32学习】——定时器的编码器接口&正交编码器&编码器接口测速代码实操

    文章目录 前言 一 编码器接口 1 简介 2 正交编码器 二 实操案例 编码器接口测速 总结心得 声明 学习笔记根据b站江科大自化协stm32入门教程编辑 仅供学习交流使用 前言 引入 本实操案例与之前学习外部中断时写的旋转编码器计次的代码
  • 用git bash上传文件到gitee

    本地上传 下载git 官网链接 Git 点击Downloads 选择自己的系统类型 我选的是64 bit Git forWindows Setup 安装git 安装过程中只需额外勾选下图选项即可 这样git bash快捷键将会出现在桌面 会
  • 55. 跳跃游戏 45. 跳跃游戏 II

    55 跳跃游戏 给定一个非负整数数组 nums 你最初位于数组的 第一个下标 数组中的每个元素代表你在该位置可以跳跃的最大长度 判断你是否能够到达最后一个下标 示例 1 输入 nums 2 3 1 1 4 输出 true 解释 可以先跳 1
  • 数据挖掘之C4.5决策树算法

    1 决策树算法实现的三个过程 特征选择 选择哪些特征作为分类的标准是决策树算法的关键 因此需要一种衡量标准来进行特征的确定 不同的决策树衡量标准不同 例如C4 5决策树就是以信息增益率来作为衡量标准 决策树的生成 根据所选择的衡量标准不断递
  • Ubuntu 20系统WIFI断连问题

    最近工作需要购置了一台GPU机器 然后搭建了深度学习的运行环境 在工作中将这台机器当做深度学习的服务器来使用 前期已经配置好多用户以及基础环境 但最近通过xshell连接总是不间断的出现断连现象 下面记录下 为此主要进行的操作 1 IP地址
  • Dubbo的几种序列化协议

    dubbo 支持哪些通信协议 支持哪些序列化协议 说一下 Hessian 的数据结构 PB 知道吗 为什么 PB 的效率是最高面试官心理分析 面试官心理分析 上一个问题 说说 dubbo 的基本工作原理 那是你必须知道的 至少要知道 dub
  • 802.11 - 定向多播服务(Directed multicast service)

    定向多播服务 前言 802 11v指定了定向多播服务 directed multicast service DMS 使客户端设备能够请求AP直接向其发送组播和广播帧 提高了网络效率 DMS的传输速率比定期组播每秒快数百Mb 与非DMS基础设
  • Basic Level 1035 插入与归并 (25分)

    题目 根据维基百科的定义 插入排序是迭代算法 逐一获得输入数据 逐步产生有序的输出序列 每步迭代中 算法从输入序列中取出一元素 将之插入有序序列中正确的位置 如此迭代直到全部元素有序 归并排序进行如下迭代操作 首先将原始序列看成 N 个只包
  • Java的流程控制结构以及程序跳转关键字详解

    本文详细介绍了Java中的流程控制结构 以及跳转关键字break continue return的使用 文章目录 1 流程控制结构分类 2 顺序结构 3 选择结构 3 1 if语句 3 1 1 if 3 1 2 if else 3 1 3
  • 匿名科创无人机学习心得

    1 飞控stm32串口5连接imu 串口五发送的指令会发送到imu中 如果是自定义的用户格式帧 比如 AA FF F1 03 01 01 01 A0 67 会先到imu imu的串口1接stm飞控 串口2接数传 从串口1接收到的数据会通过串
  • element-ui表单仅对el-form表单的部分字段/某个字段进行验证

    根据elementui文档 查询到validateField方法 可以给表单的某个字段添加校验 对表单单个字段进行校验 data rules email required true message 请输入邮箱 trigger change