解决vue elementUI 切换语言表单验证提示不更新

最新推荐文章于 2023-12-12 13:47:33 发布

ASUKA_FE

最新推荐文章于 2023-12-12 13:47:33 发布

阅读量4.7k

点赞数 5

本文链接：https://blog.csdn.net/weixin_43846401/article/details/102747816

版权

本文探讨了在项目国际化处理中遇到的表单验证提示信息更新问题，提供了一种仅针对已显示错误提示的表单项更新语言的解决方案，避免了语言切换时整个表单的重新验证。

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

项目需要国际化处理，发现一个问题：当切换语言时表单验证的提示信息没有同时更新过来
在这里插入图片描述
看了一些解决方案，可以把rules放到computed里，但是这样切换语言会导致整个表单重新验证，而我只想把已经提示错误信息的几个表单项改变提示语言，

解决方案：

不使用message传入错误提示，手动传入验证规则

let validateCode = (rule, value, callback) => {
	if (!value) {
		return callback(new Error(this.$t('common.validateCode')))
	} else {
		 return callback()
	}
};

rules: {
	code: [
		{validator: validateCode, trigger: 'blur'}
	]
}

监听i18n，切换语言时查找已经提示错误的表动项，手动触发验证

watch:{
            "$i18n.locale": function () {
                this.$refs['form'].fields.forEach(item => {
                    if(item.validateState === 'error'){
                        this.$refs['form'].validateField(item.labelFor)
                    }
                })
            }
        },