解决Vue+Element UI使用表单rules国际化时From表单验证信息不能实时更新

说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!

博主在工作之余开始进行自动化测试平台的开发,虽然已经996一个月了但是还是在使劲挤时间做这件事情,目前平台使用前端框架vue-element-admin进行简化后二次开发,目前保留了原框架中的国际化、主题色、全局搜索、字体大小以及右侧悬浮设置菜单,更多细节后续会在系列文章中进行更新~

问题描述

在默认中文时,点击登录或者失去输入框焦点时测试时,表单验证消息没有问题如图1,此时如果切换到英文时就会出现验证信息还是中文的情况如图2所示

在这里插入图片描述
在这里插入图片描述

点击注册按钮切换注册表单,此时会重置表单数据,所以不会出现验证提示信息与语言不符情况

在这里插入图片描述

解决方法

方法1

使用computed计算属性监控自己定义的变量

computed: {loginRules() { // :rules="loginRules"return {username: [{ required: true, message: this.$t('login.errUserNameMsg'), trigger: 'blur' }],password: [{ required: true, message: this.$t('login.errPasswordMsg'), trigger: 'blur' }]}}}

方法2

通过watch监听切换中英文时,重置表单验证,这个是博主比较喜欢的,其实不需要保留上一次语言产生的验证提示,直接重置这样看着比较舒服干净,也不存在语言与提示信息不符的情况

watch: {// 监听切换中英文时,重置表单验证'$i18n.locale': function() {this.$refs['loginForm'].clearValidate()}
}

最终效果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32F429IGT6使用CubeMX配置IIC通信(AT2402芯片)

1、硬件电路 写地址:0xA0 读地址:0xA1 存储容量:256Byte 2、设置RCC,选择高速外部时钟HSE,时钟设置为180MHz 3、配置IIC 4、生成工程配置 5、部分代码 #define IIC_WRITE_ADDR 0xA0 // IIC写地址 #define IIC_READ_ADDR 0xA1 …

推荐系统工作小结

最初的构想 由于我们的技术团队中并没有人真正用大数据的方法做过推荐系统。所以我们定的步骤是先解决有没有的问题。然后再持续地进行效果优化的工作。 现状 但一方面考虑到要快速上线。另一方面也希望对推荐系统的效果有一个合理的参照。我们打算先使用达观数据的推荐系统云…

爬虫015_python异常_页面结构介绍_爬虫概念介绍---python工作笔记034

来看python中的异常 可以看到不做异常处理因为没有这个文件所以报错了 来看一下异常的写法

【css】渐变

渐变是设置一种颜色或者多种颜色之间的过度变化。 两种渐变类型: 线性渐变(向下/向上/向左/向右/对角线) 径向渐变(由其中心定义) 1、线性渐变 语法:background-image: linear-gradient(direction, co…

原子css 和 组件化css如何搭配使用

如果让你来实现下面这种页面,该怎么实现呢 原子化和css组件化方式写法,可以搭配起来使用,常用的css 原子css 比如 下面这些类似flex 布局,lstn curser-pointer 等常用的或者 具备一定规律性的padding margin 样式可以抽取为单独…

阿里云服务器搭建Magento电子商务网站图文教程

本文阿里云百科分享使用阿里云服务器手动搭建Magento电子商务网站全流程,Magento是一款开源电商网站框架,其丰富的模块化架构体系及拓展功能可为大中型站点提供解决方案。Magento使用PHP开发,支持版本范围从PHP 5.6到PHP 7.1,并使…

Selenium图片滑块验证码

因为种种原因没能实现愿景的目标,在这里记录一下中间结果,也算是一个收场吧。这篇文章主要是用selenium解决滑块验证码的个别案列。 思路: 用selenium打开浏览器指定网站 将残缺块图片和背景图片下载到本地 对比两张图片的相似地方&#…

【果树农药喷洒机器人】Part6:基于深度相机与分割掩膜的果树冠层体积探测方法

📢:如果你也对机器人、人工智能感兴趣,看来我们志同道合✨ 📢:不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢:文章若有幸对你有帮助,可点赞 👍…

JVM垃圾回收

如何确定垃圾 对堆垃圾回收前的第一步就是要判断哪些对象已经死亡(即不能再被任何途径使用的对象) 引用计数法 这个方法就是为对象添加计数器来标识引用个数,计数器为 0 的对象就是不可能再被使用的。但是这种方法存在循环引用问题&#x…

IntelliJ IDEA快捷键大全

文章目录 1、构建/编译2、文本编辑3、光标操作4、文本选择5、代码折叠6、辅助编码7、上下文导航8、查找操作9、符号导航10、代码分析11、运行和调试12、代码重构13、全局 CVS 操作14、差异查看器15、工具窗口 本文参考了 IntelliJ IDEA 的官网,列举了IntelliJ IDEA&…

提速Rust编译器!

Nethercote是一位研究Rust编译器的软件工程师。最近,他正在探索如何提升Rust编译器的性能,在他的博客文章中介绍了Rust编译器是如何将代码分割成代码生成单元(CGU)的以及rustc的性能加速。 他解释了不同数量和大小的CGU之间的权衡…

git命令使用

君子拙于不知己,而信于知己。——司马迁 清屏:clear 查看当前面板的路径:pwd 查看当前面板的文件:ls 创建文件夹:mkdir 文件夹名 创建文件:touch 文件名 删除文件夹:rm -rf 文件夹名 删除文件:r…

ChatGPT: 人机交互的未来

ChatGPT: 人机交互的未来 ChatGPT背景ChatGPT的特点ChatGPT的应用场景结论 ChatGPT ChatGPT是一种基于大数据和机器学习的人工智能聊天机器人模型。它由国内团队发明、开发,并被命名为Mental AI。ChatGPT的目标是通过模拟自然对话的方式,提供高效、智能…

基于Spring Boot的影视点播网站设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频: 基于Spring Boot的影视点播网站设计与实现(Javaspring bootMySQL) 使用技术: 前端:html css javascript jQuery ajax thymeleaf 微信小程序 后端:Java springboot…

使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便

Vite官方网站:Vite | 下一代的前端工具链 Vite 并不是基于 Webpack 的,它有自己的开发服务器,利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建,速度也更快…

react-virtualized可视化区域渲染的使用

介绍 github地址:https://github.com/bvaughn/react-virtualized 实例网址:react-virtualized如果体积太大,可以参考用react-window。 使用 安装: yarn add react-virtualized。在项目入口文件index.js中导入样式文件&#xff…

10. Docker Swarm(一)

目录 1、前言 2、Docker Swarm体系架构 2.1、简单介绍 2.2、体系架构 3、简单使用 3.1、环境准备 3.2、初始化master节点 3.3、建立worker节点 3.4、查看集群的节点信息 3.5、部署应用 3.5.1、创建Dockerfile文件 3.5.2、构建镜像 3.5.3、将镜像上传到Docker仓库 …

宋浩概率论笔记(四)数字特征

本帖更新数字特征,包含期望、方差、相关系数等,要点在于记忆性质中的各种公式,遇到题目时能迅速利用已知条件计算答案。

ArcGIS Pro字段操作代码汇总

属性表是GIS数据的重要组成部分,有了属性表才可以进行分析和分类配色等操作,这里为大家介绍一下ArcGIS Pro中字段操作的相关代码,希望能对你有所帮助。 关键词搜索 打开属性表,点击按属性选择,如下图所示。 点击按属…

【loadbalancer】还在用Ribbon?试试Spring自带的LoadBalancer吧

Spring Cloud LoadBalancer是Spring Cloud官方自己提供的客户端负载均衡器, 用来替代Ribbon。 Spring官方提供了两种客户端都可以使用loadbalancer: RestTemplate:Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程…