項目需要國際化處理，發(fā)現(xiàn)一個問題：當切換語言時表單驗證的提示信息沒有同時更新過來

image.png

看了一些解決方案，可以把rules放到computed里，但是這樣切換語言會導致整個表單重新驗證，而我只想把已經(jīng)提示錯誤信息的幾個表單項改變提示語言，

解決方案：
不使用message傳入錯誤提示 ，手動傳入驗證規(guī)則

<Form ref="formUser" :model="formData" :rules="ruleValidate">
                    <FormItem prop="userName">
                        <Input v-model="formData.userName" type="text" name="userName"
                               :placeholder="$t('login.userNamePlaceholder')">
                        <Icon type="ios-person-outline" slot="prepend" size="21"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="passWord">
                        <Input v-model="formData.passWord" type="password" name="password" @keyup.enter="login"
                               :placeholder="$t('login.passwordPlaceholder')">
                        <Icon type="ios-lock-outline" slot="prepend" size="21"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem class="login-btn-wrap">
                        <Button type="primary" long @click="login('formUser')">{{$t('login.loginBtn')}}</Button>
                    </FormItem>

                </Form>

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();
                                }
                            }
                        }
                    ]
                }

監(jiān)聽i18n，切換語言時查找已經(jīng)提示錯誤的表動項，手動觸發(fā)驗證

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