說明：該篇博客是博主一字一碼編寫的，實(shí)屬不易，請尊重原創(chuàng)，謝謝大家！
博主在工作之余開始進(jìn)行自動(dòng)化測試平臺的開發(fā)，雖然已經(jīng)996一個(gè)月了但是還是在使勁擠時(shí)間做這件事情，目前平臺使用前端框架
vue-element-admin進(jìn)行簡化后二次開發(fā)，目前保留了原框架中的國際化、主題色、全局搜索、字體大小以及右側(cè)懸浮設(shè)置菜單，更多細(xì)節(jié)后續(xù)會在系列文章中進(jìn)行更新~
問題描述
在默認(rèn)中文時(shí)，點(diǎn)擊登錄或者失去輸入框焦點(diǎn)時(shí)測試時(shí)，表單驗(yàn)證消息沒有問題如圖1，此時(shí)如果切換到英文時(shí)就會出現(xiàn)驗(yàn)證信息還是中文的情況如圖2所示
點(diǎn)擊注冊按鈕切換注冊表單，此時(shí)會重置表單數(shù)據(jù)，所以不會出現(xiàn)驗(yàn)證提示信息與語言不符情況
解決方法
方法1
使用computed計(jì)算屬性監(jiān)控自己定義的變量
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監(jiān)聽切換中英文時(shí)，重置表單驗(yàn)證，這個(gè)是博主比較喜歡的，其實(shí)不需要保留上一次語言產(chǎn)生的驗(yàn)證提示，直接重置這樣看著比較舒服干凈，也不存在語言與提示信息不符的情況文章來源：http://www.zghlxwxcb.cn/news/detail-642774.html
watch: {
// 監(jiān)聽切換中英文時(shí)，重置表單驗(yàn)證
'$i18n.locale': function() {
this.$refs['loginForm'].clearValidate()
}
}
最終效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-642774.html
到了這里，關(guān)于解決Vue+Element UI使用表單rules國際化時(shí)From表單驗(yàn)證信息不能實(shí)時(shí)更新的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
