Element UI 表單驗證多國語系(i18n)

Element UI 表單驗證多國語系(i18n)

在 在 Node JS 使用 vue-cli 3 快速開發網頁與佈署到 github-pages 與 使用Vue-cli 3.x 實作 i18n 多國語系網站 中，談到  ElementUI 是網頁開發時很好的元件，在表單送出前經常會先作資料的判斷，以避免使用者送出一堆垃圾資料，而忙壞了後端主機，在官方網站有一個表單驗證的範例。其中驗證的程式碼，以下列範例來作說明：

<template>
<el-form label-width="100px" label-position="top" :model="user" status-icon :rules="userFormRules" ref="userForm">
 <el-form-item prop="username" :label="$t('SYSTEM.USER_NAME')">
   <el-input v-model="user.username" clearable></el-input>
 </el-form-item>
 <el-form-item prop="email" :label="$t('COMMON.EMAIL')">
   <el-input v-model="user.email" clearable></el-input>
 </el-form-item>
 <div class="p-formgrid p-grid">
   <div class="p-field p-col">
  <el-form-item :label="$t('COMMON.ACTIVE_DATE')" >
    <el-date-picker  v-model="user.activeDate" type="date" :placeholder="$t('COMMON.ACTIVE_DATE')" clearable></el-date-picker>
  </el-form-item>
   </div>
   <div class="p-field p-col">
  <el-form-item :label= "$t('COMMON.INACTIVE_DATE')">
    <el-date-picker  v-model="user.inactiveDate" type="date" :placeholder="$t('COMMON.INACTIVE_DATE')" clearable></el-date-picker>
  </el-form-item>
   </div>
 </div>
</el-form>
</template>


<script>
  export default {
    data() {      
      return {
        user:{},
        userForm: {
          username: '',
          email: '',
        },
        userFormRules: {
          username: [
            { required: true, message: this.$t('REQUIRED.USER_NAME'), trigger: 'blur' }
          ],
          mail: [
            { required: true, message: this.$t('REQUIRED.EMAIL'), trigger: 'blur' }
          ]
        }
      };
    },    
  }
</script>

使用 Vue-cli 3.x 實作 i18n 多國語系網站 作語言即時切換時，發現 label & placeholder 都有即時呈現語言的切換，唯獨錯誤訊息顯示沒切換。這時，只要將 userFormRules 移到 computed 即可。

computed: {
    userFormRules() {
      const rules = {
        username: [
            { required: true, message: this.$t('REQUIRED.USER_NAME'), trigger: 'blur' }
          ],
        email: [
            { required: true, message: this.$t('REQUIRED.EMAIL'), trigger: 'blur' }
        ]
      }
      return rules;
    }
},