el-form表单怎么一次验证两个el-form-item

news2024/9/22 19:44:06

项目场景:

在项目中有【设置密码】以及【确认密码】输入,希望在两者一致的时候,两个框的错误提示都消失。


问题描述

提示:这里描述项目中遇到的问题:

重现步骤:

              1、第一个密码框 输入密码123456lyy
             
              2、确认密码框输入密码 123456lyy

              3、在确认密码框继续输入1------有两次密码不一致提示

              4、在第一个密码框继续输入1----密码不一致提示不消失

期望结果:消失
实际结果:如上,此时点击确定,可以提交
在这里插入图片描述


解决方案:

提示:想要解决,还得需要看element的官网。

主要用到的是对部分表单字段进行校验的方法,如下:

在这里插入图片描述
就是在【设置密码】的输入框输入密码时,在对【设置密码】校验中加入对【确认密码】的校验。

核心代码:

if( this.subAccount.subAccountconfirmPassword != '') {
   this.$refs.createAccount.validateField('subAccountconfirmPassword');
}

以下是完整的代码:

    <el-form
      ref="createAccount"
      :model="subAccount"
      :rules="subAccountRules">
      <el-form-item
        label="设置密码"
        prop="subAccountPassword">
        <el-input
          v-model.trim="subAccount.subAccountPassword"
          type="password"
          autocomplete="new-password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item 
      	label="确认密码" 
      	prop="subAccountconfirmPassword">
        <el-input
          v-model.trim="subAccount.subAccountconfirmPassword"
          type="password"
          autocomplete="new-password"
          placeholder="请再次输入密码"
        ></el-input>
      </el-form-item>
    </el-form>
  data() {
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'));
      } else {
        .....
        }
        if( this.subAccount.subAccountconfirmPassword != '') {
          this.$refs.createAccount.validateField('subAccountconfirmPassword');
        }
        callback();
      }
    };
    const validateConfirmPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.subAccount.subAccountPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      subAccountRules: {
        subAccountPassword: [
          { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
          { validator: checkPassword, 
          	trigger: ['change', 'blur'] 
          },
        ],
        subAccountconfirmPassword: [
          { required: true, message: '请再次输入密码', trigger: ['change', 'blur'] },
          {
            validator: validateConfirmPwd,
            trigger: ['change', 'blur'],
          },
        ],
      },
    };
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1545823.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HashMap集合 --java学习笔记

HashMap集合 HashMap(由键决定特点):无序、不重复、无索引 (用的最多) HashMap的底层原理 HashMap跟Hashset的底层原理是一一样的&#xff0c;都是基于哈希表实现的Hashset&#xff1a;Set系列集合&#xff1a;Hashset、LinkedHashset、TreeSet --java学习笔记-CSDN博客实际…

变压吸附制氮设备原理及行业应用概览

随着科技的不断进步&#xff0c;氮气的制备和应用在各个领域应用广泛。变压吸附制氮设备作为一种高效、节能的氮气制备技术&#xff0c;逐渐被大家所熟知。本期小编将详细介绍变压吸附制氮设备的原理及其应用。 一、变压吸附制氮设备的原理 变压吸附制氮设备主要利用分子筛的特…

Camtasia2024永久免费专业的屏幕录制和视频剪辑软件

Camtasia2024专业的屏幕录制和视频剪辑软件&#xff0c;3000多万专业人士在全球范围内使用Camtasia展示产品&#xff0c;教授课程&#xff0c;培训他人&#xff0c;以更快的速度和更吸引人的方式进行沟通和屏幕分享。使您在Windows和Mac上进行录屏和剪辑创作专业外观的视频变得…

5G双域专网+零信任的神奇魔法

引言 在当今数字化程度不断提升的社会中&#xff0c;信息安全已经成为企业和组织发展的关键要素之一。特别是在网络连接日益广泛的环境下&#xff0c;对于数据的保护和隐私的维护变得尤为重要。随着5G技术的飞速发展&#xff0c;5G双域专网为企业提供了更快速、更可靠的连接&a…

【优选算法】专题1 -- 双指针 -- 复写0

前言&#xff1a; 补充一下前文没有写到的双指针入门知识&#xff1a;专题1 -- 双指针 -- 移动零 目录 基础入门知识&#xff1a; 1. 复写零&#xff08;easy&#xff09; 1. 题⽬链接&#xff1a;1089.复习0 - 力扣&#xff08;LeetCode&#xff09; 2. 题⽬描述&#xff…

智慧城市解决方案大全:标准规范顶层设计指南、整体解决方案、厂商售前宣讲PPT、招投标、智慧城市白皮书等全套680份,一次性打包下载

关键词&#xff1a;智慧城市&#xff0c;智慧城市解决方案&#xff0c;智慧城市发展的前景与趋势&#xff0c;智慧城市概念主力流出&#xff0c;智慧城市项目包括哪些方面&#xff0c;智慧城市项目方案&#xff0c;智慧城市宣传片&#xff0c;智慧城市白皮书&#xff0c;智慧城…

海外仓系统开发可定制开发吗?大概要多少钱呢?

随着跨境电商的不断发展&#xff0c;海外仓作为跨境电商的重要环节&#xff0c;已经越来越重要了&#xff0c;而海外仓系统作为海外仓的实用性工具&#xff0c;更是有着不可替代的作用的。但每家公司的业务所需都是不一样的&#xff0c;因此越来越多企业开始关注海外仓系统的开…

零售商品计划新篇章:智能管理系统的挑战与机遇

在零售企业管理中&#xff0c;商品计划管理在零售企业运营中占据核心地位。面对日益激烈的市场竞争和消费者需求的多样化&#xff0c;零售企业在商品计划管理方面面临着诸多挑战和需求。以下针对这些挑战和需求的分析&#xff0c;以及对一套智能商品计划管理系统应具备的功能和…

EPSON推出的实时时钟模块RX8130CE功耗低至300nA、从容应对各种使用场景

随着科技的进步和消费者需求的不断变化&#xff0c;笔记本电脑市场继续展现出强劲的发展势头一方面移动性和轻薄性成为主流&#xff0c;另外一方面性能在不断提升&#xff0c;功能也日益丰富。实时时钟模组&#xff0c;作为提供时间和定时功能的单元模块&#xff0c;是笔记本电…

Vue+ELement UI el-table移入或选中某行时改变颜色

起因 出库按钮 置灰时&#xff0c;鼠标移入到表格的某行时&#xff0c;行背景颜色与按钮背景颜色会被覆盖住 最初颜色 实现效果 修改行背景颜色 <style>/* 用来设置当前页面element全局table 选中某行时的背景色*/.el-table__body tr.current-row>td{background-c…

2024年大模型面试准备(三):聊一聊大模型的幻觉问题

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何备战、面试常考点分享等热门话题进行了深入的讨论。 合集在这…

后端常问面经之Spring和Mybatis框架

Spring的IOC介绍一下&#xff1a; 所谓控制就是对象的创建、初始化、销毁。 创建对象&#xff1a;原来是 new 一个&#xff0c;现在是由 Spring 容器创建。 初始化对象&#xff1a;原来是对象自己通过构造器或者 setter 方法给依赖的对象赋值&#xff0c;现在是由 Spring 容器…

百能云板开启1-6层陶瓷pcb板定制服务

普通PCB通常是由铜箔和基板粘合而成&#xff0c;而基板材质大多数为玻璃纤维&#xff08;FR-4&#xff09;&#xff0c;酚醛树脂&#xff08;FR-3&#xff09;等材质&#xff0c;粘合剂通常是酚醛、环氧等。在PCB加工过程中由于热应力、化学因素、生产工艺不当等原因&#xff0…

【第十二届“泰迪杯”数据挖掘挑战赛】【2024泰迪杯】B题基于多模态特征融合的图像文本检索—解题全流程(持续更新)

2024 年(第 12 届)“泰迪杯”数据挖掘挑战赛B题 解题全流程&#xff08;持续更新&#xff09; -----基于多模态特征融合的图像文本检索 一、写在前面&#xff1a; ​ 本题的全部资料打包为“全家桶”&#xff0c; “全家桶”包含&#xff1a;模型数据、全套代码、训练好的模…

万亿功能性食品市场爆火,北美膳食健康品牌GNITE如何抓住“朋克养生”年轻人!

近几年&#xff0c;年轻人的养生意识不断提升&#xff0c;“吃出健康”理念盛行&#xff0c;在中国年轻人独有的“懒养生”理念加持下&#xff0c;功能性软糖精准击中年轻人的健康焦虑&#xff0c;助眠、美白、护眼、补铁、减脂……等产品在新消费领域兴起&#xff0c;消费热度…

svn如何合并代码以及解决合并冲突的问题(把分支代码合并到主版本)

1.选择主版本的文件夹。 ​​​​​​​ 2.选择合并一个不同的分支 3.选择主分支的路径和要合并的代码范围 4.点解next 选择这两个选项 5.然后点击Test merge&#xff0c;查看能否和并成功 有红色的提示&#xff0c;说明是有冲突的&#xff0c; 都是黑色说明能够合并成功 …

C语言数据类型——常量

目录 常量&#xff08;Constant&#xff09; 宏常量&#xff08;Macro Constant&#xff09; const常量​编辑 常量&#xff08;Constant&#xff09; 在程序中不能改变其值的量 包括&#xff1a; 整形&#xff08;如&#xff1a;89&#xff0c;22……&#xff09; *默认…

【STM32嵌入式系统设计与开发】——11Exit(外部中断应用实验)

这里写目录标题 一、任务描述二、任务实施1、ActiveBeep工程文件夹创建2、函数编辑&#xff08;1&#xff09;主函数编辑&#xff08;2&#xff09;USART1初始化函数(usart1_init())&#xff08;3&#xff09;USART数据发送函数&#xff08; USART1_Send_Data&#xff08;&…

人工智能在产业中应用

一、从人工智能说起 (一) 关联关系发现 1. 推荐匹配 在信息爆炸的时代&#xff0c;我们每天都面临着信息的轰炸&#xff0c;无数电影、歌曲、帖子、商品呈现在我们的眼前。海量内容虽然丰富多彩&#xff0c;但同时也让我们感到目不暇接、应接不暇。就在这时&#xff0c;有一…

基于朴素贝叶斯算法和vue分离式架构的新闻数据情感分析可视化

基于朴素贝叶斯算法和vue分离式架构的新闻数据情感分析可视化 作品简介一、技术栈二、功能三、系统展示 作品简介 在本篇博客中&#xff0c;我将带您探索一个基于Python的新闻数据分析项目&#xff0c;其中涉及爬虫、可视化、情感分析等多种技术&#xff0c;并通过整合Django和…