Solve the problem that the From form verification information cannot be updated in real time when Vue+Element UI uses form rules to internationalize

Note: This blog is written word by word by the blogger, which is not easy. Please respect the originality, thank you all!

The blogger started developing an automated testing platform after work. Although it has been 996 for a month, he is still trying to squeeze in time to do this. The current platform uses a front-end frameworkvue-element-admin After simplified secondary development, the internationalization, theme color, global search, font size and right floating settings menu in the original framework are currently retained. More details will be updated in the series of articles~

Problem Description

When the default is Chinese, when testing when clicking login or losing focus of the input box, there is no problem with the form verification message as shown in Figure 1. At this time, if you switch to English, the verification message will still be in Chinese, as shown in Figure 2

Click the registration button to switch the registration form. At this time, the form data will be reset, so there will be no inconsistency between the verification prompt information and the language.

Solution

method 1

Usecomputedcomputed properties to monitor self-defined variables

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' }
        ]
      }
    }
  }

Method 2

Passwatch Reset the form verification when switching between Chinese and English. This is what bloggers prefer. In fact, there is no need to retain the verification prompt generated by the last language, just reset it like this It looks more comfortable and clean, and there is no inconsistency between the language and the prompt information

watch: {
    
    
  // 监听切换中英文时，重置表单验证
  '$i18n.locale': function() {
    
    
    this.$refs['loginForm'].clearValidate()
  }
}

final effect