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表单的部分字段/某个字段进行验证 的相关文章

  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • 如何在 Java 中使用 HTML 解析器和 Apache Tika 来提取所有 HTML 标签?

    我下载了 tika core 和 tika parser 库 但找不到将 HTML 文档解析为字符串的示例代码 我必须删除网页源的所有 html 标签 我能做些什么 如何使用 Apache Tika 进行编码 您想要 html 文件的纯文本
  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就
  • 使用 PHP 获取 2 个同名 HTML 输入标签的值

    假设我有下表
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • 为什么 document.getelementbyId 在 Firefox 中不起作用?

    我不明白为什么 document getElementById 在 Firefox 中不起作用 document getElementById main style width 100 当我检查 Firebug 时 它说 类型错误 docu
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http
  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has
  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小

随机推荐

  • 移动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