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; } },
你必須 登入 才能發表評論。