vue+element UI的form表单规则校验国际化（多语言切换）

最新推荐文章于 2024-03-22 16:20:13 发布

旧巷幽草{香

最新推荐文章于 2024-03-22 16:20:13 发布

阅读量2k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： element_ui vue.js 文章标签： vue.js ui javascript

本文链接：https://blog.youkuaiyun.com/qq_38181746/article/details/129155357

vue.js 同时被 2 个专栏收录

30 篇文章

订阅专栏

element_ui

19 篇文章

订阅专栏

在开发支持多语言的管理系统时，遇到表单验证提示未随语言切换而更新的问题。解决方案是利用Vue.js的computed属性动态生成表单验证规则，结合i18n的$t方法来获取当前语言环境的错误信息。将rules定义在computed中，确保每次语言切换时，验证消息会随之更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在开发管理系统支持国际化，遇到了一个问题，但表单规则校验的时候，切换语言然后表单规则验证的提示没有跟着改变

解决方法

在这里插入图片描述

computed: {
        // 表单校验
        rules(){
          const equalToPassword = (rule, value, callback) => {
            if (this.user.newPassword !== value) {
              callback(new Error(this.$t('rule.conpsdmsg')));
            } else {
              callback();
            }
          };
          return {
            oldPassword: [
            { required: true, message: this.$t('rules.oldPassword'), trigger: "blur" }
          ],
          newPassword: [
            { required: true, message: this.$t('rules.newPassword'), trigger: "blur" },
            { min: 6, max: 20, message: this.$t('rules.newPsdlen'), trigger: "blur" }
          ],
          confirmPassword: [
            { required: true, message: this.$t('rules.confirmPassword'), trigger: "blur" },
            { required: true, validator: equalToPassword, trigger: "blur" }
          ]
          }
          
        }

    },

不能把rules放在data中，使用了computed计算属性