解决vue-cli脚手架，UI框架iview 国际化，form表单切换语言 表单验证提示不更新

项目需要国际化处理，发现一个问题：当切换语言时表单验证的提示信息没有同时更新过来

image.png

看了一些解决方案，可以把rules放到computed里，但是这样切换语言会导致整个表单重新验证，而我只想把已经提示错误信息的几个表单项改变提示语言，

解决方案：
不使用message传入错误提示 ，手动传入验证规则

                    
                        
                        
                        
                    
                    
                        
                        
                        
                    
                    
                        {{$t('login.loginBtn')}}
                    

                

ruleValidate: {
                    userName: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: (rule, value, callback) => {
                                if (!value) {
                                    return callback(new Error(this.$t("login.userNameValidate")));
                                } else {
                                    callback();
                                }
                            }
                        }
                    ],
                    passWord: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: (rule, value, callback) => {
                                if (!value) {
                                    return callback(new Error(this.$t('login.passWordValidateNull')));
                                } else if (!/^\w{6,20}$/.test(value)) {
                                    return callback(new Error(this.$t('login.passWordValidateDigits')));
                                } else {
                                    callback();
                                }
                            }
                        }
                    ]
                }

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

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

参考文献：https://blog.csdn.net/weixin_43846401/article/details/102747816