解决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()
  }
}

最终效果

在这里插入图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cdtaogang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值