---
title: '02/01 VueJS 教學筆記: i18n處理表單驗證訊息小技巧'
disqus: hackmd
---

02/01 VueJS 教學筆記: i18n處理表單驗證訊息小技巧
===

綱要

[TOC]

沒必要將特定用途的訊息定義多個變數
---

假如語言上的文法與特性許可的話，我們並不需要將翻譯內容逐個寫出來
而是可以透過字串組合的方式讓表單驗證、Placeholder等更有效率被使用。

看看以下這串語言檔內容，雖然它再正常不過了，但可能你也會覺得冗餘：

module.exports = {
  header: 'Vue i18n 多語管理',
  select_language: '選擇語言',
  change_language: '切換語言',
  select_datetime: '請選擇日期',
  please_select: '請選擇',
  locale_en: 'English',
  locale_zh_tw: '繁體中文',
  locale_jp: '日文',
  form_tel: '電話號碼',
  form_phone: '手機號碼',
  form_email: 'Email',
  form_website: '個人網站',
  placeholder: {
    name: '請輸入姓名',
    tel: '請輸入電話號碼',
    phone: '請輸入手機號碼',
    email: '請輸入Email',
    website: '請輸入個人網站'
  },
  validate: {
    error: {
      tel: '電話號碼格式錯誤',
      phone: '手機號碼格式錯誤',
      email: 'Email格式錯誤',
      website: '個人網站格式錯誤'
    },
    required: {
      tel: '電話號碼不可為空',
      phone: '手機號碼不可為空',
      email: 'Email不可為空',
      website: '個人網站不可為空'
    }
  }
}

我們可以精簡成這樣：

// zh_tw.js
module.exports = {
  header: 'Vue i18n 多語管理',
  select_language: '選擇語言',
  change_language: '切換語言',
  select_datetime: '請選擇日期',
  please_select: '請選擇',
  locale_en: 'English',
  locale_zh_tw: '繁體中文',
  locale_jp: '日文',
  form_tel: '電話號碼',
  form_phone: '手機號碼',
  form_email: 'Email',
  form_website: '個人網站',
  placeholder: {
    enter: '請輸入',
    example: 'ex: '
  },
  validate: {
    error: 'var_1格式錯誤',
    required: 'var_1必填，不可為空'
  }
}

// en.js
module.exports = {
  header: 'Vue i18n Multi Language',
  select_language: 'select language',
  change_language: 'change language',
  select_datetime: 'select datetime',
  please_select: 'please select',
  locale_en: 'English',
  locale_zh_tw: 'Chinese (Traditional)',
  locale_jp: 'Japenese',
  input_format_error: 'var_1 format error',
  input_required: 'var_1 is required.',
  form_name: 'Name',
  form_tel: 'TEL',
  form_phone: 'Phone',
  form_email: 'Email',
  form_website: 'WEB Site',
  placeholder: {
    enter: 'please enter ',
    example: 'ex: '
  },
  validate: {
    error: 'var_1 format error',
    required: 'var_1 is required'
  }
}

// jp.js
module.exports = {
  header: 'Vue i18n 多言語機能',
  select_language: '言語選択',
  change_language: '言語切替',
  select_datetime: '日付を選択してください',
  please_select: '言語を選んでください',
  locale_en: '英語',
  locale_zh_tw: '中国語(台湾)',
  locale_jp: '日本語',
  input_format_error: 'var_1 フォーマット間違っています。',
  input_required: 'var_1 必ず入力してください',
  form_name: '名前',
  form_tel: '電話番号',
  form_phone: '携帯番号',
  form_email: 'メールアドレス',
  form_website: 'サイト',
  placeholder: {
    enter: 'を入力してください',
    example: 'ex: '
  },
  validate: {
    error: 'var_1 フォーマットは間違っています',
    required: 'var_1 必ず入力してください'
  }
}

注意到了嗎？此時你會發現日文的文法關係，先後順序和中英文都不同
不過這倒不是太大問題，因為我們可以在調用時以三元判別式處理：

<el-form-item :label="$t('form_name')">
  <!--假如當前語系是 jp，就將placeholder.enter倒裝過來-->
  <el-input
    v-model="form.name.value"
    type="text"
    :placeholder="lang === 'jp' ?
    $t('form_name') + $t('placeholder.enter') :
    $t('placeholder.enter') + $t('form_name')"
  />
</el-form-item>

import { getLanguage, setLanguage } from '../../lang'
export default {
  data() {
    return {
      lang: '',
    }
  },
  
  create() {
    this.dataGetLanguage()
  },
  
  methods: {
    // 取得當前的語言
    dataGetLanguage() {
      this.lang = getLanguage()
      console.log('lang: ', this.lang)
    },
  }
}

文法上這樣就能顯示正確了，畢竟不同的語言有不同規則


---

利用replace()來處理表單驗證訊息
---

我們可以用剛才在語系檔中建立的`var_1 格式錯誤`替換部分內容
假如輸入了錯誤的資料格式，就會顯示對應的欄位名稱+提示訊息：

<!--使用element UI 內建驗證 v-bind:rules 並指定v-model為form2-->
<el-form ref="loginForm" :model="form2" :rules="rules" label-width="100px" data-width="30rem">
  <el-form-item :label="$t('form_name')" prop="name">
    <el-input v-model="form2.name" type="text" :placeholder="$t('placeholder.name')" />
  </el-form-item>
  <el-form-item :label="$t('form_tel')" prop="tel">
    <el-input v-model="form2.tel" type="text" :placeholder="$t('placeholder.tel') + ' ex: 02-23033824'" />
  </el-form-item>
  <el-form-item :label="$t('form_phone')" prop="phone">
    <el-input v-model="form2.phone" type="text" :placeholder="$t('placeholder.phone') + ' ex: 0987-987-987'" />
  </el-form-item>
  <el-form-item :label="$t('form_email')" prop="email">
    <el-input v-model="form2.email" type="text" :placeholder="$t('placeholder.email')" />
  </el-form-item>
  <el-form-item :label="$t('form_website')" prop="url">
    <el-input v-model="form2.url" type="text" :placeholder="$t('placeholder.website')" />
  </el-form-item>
  <div class="row horizontal end">
    <el-button type="primary" @click="submit('loginForm')">SUBMIT</el-button>
  </div>
</el-form>

// 以tel的輸入格式為例
data() {
  return {
    form2: {
      name: '',
      tel: '',
      phone: '',
      email: '',
      url: ''
    },
    rules: {
      tel: [
        {
          required: true,
          pattern: /\d{2}-[2]\d{7}/,
          message: this.i18nFormatError(this.$t('form_tel')),
          trigger: 'blur'
        }
      ],
    }
  }
},

methods: {
  i18nFormatError(val) {
    // 利用正則表達式找出'var_1'的字串
    const regex = /var_1/g
    
    // 然後將指定的i18n翻譯內容變數替換掉var_1
    const text = this.$t('input_format_error').toString().replace(regex, val)
    return text
  }
  
}

自行逐個加上methods和rules後，最後的畫面就會是這樣子
如此就能用更少的時間成本，做到更好維護的多語翻譯：

[Github範例](https://github.com/fortes1219/vue_0803/blob/0803/src/components/home/Regexp.vue)


###### tags: `VueJS` `i18n`