VeeValidate 表單驗證：密碼限制及二次確認密碼

前言

開始

// 安裝 VeeValidate 套件

npm install vee-validate --save

// 在 main.js 中引用

import VeeValidate, { Validator } from 'vee-validate'


/** Custom Rule 至少需含一個數字，使用正規表達式 */
Validator.extend('requireOneNumeric', function (value) {
  return /.*[0-9].*/i.test(value)
})

Vue.use(VeeValidate, {
  // 避免自動 inject 到所有 component，需要時在 inject 
  inject: false,
  // 語系
  locale: 'zh_CN',
  // 驗證字串
  // 當看到 i18n 時，可以替換成自己的文字，這是我做語系轉換用的，zh_TW、zh_CN 分別代表繁/簡體
  // 在 max 和 min 中傳入的 length，是我 i18n 用來代入數值的
  // confirmed 則是用做二次密碼確認的
  dictionary: {
    zh_TW: {
      messages: {
        required () {
          return i18n.t('message.formColumnEmpty')
        },
        email () {
          return i18n.t('message.formMailWrong')
        },
        numeric () {
          return i18n.t('message.formNumberEmpty')
        },
        max (field, length) {
          return i18n.t('message.formCharacterOverMax', { max: length })
        },
        min (field, length) {
          return i18n.t('message.formCharacterOverMin', { min: length })
        },
        requireOneNumeric (field) {
          return i18n.t('message.formNumericeOverOne')
        },
        confirmed () {
          return i18n.t('message.pleaseConfirmPassword')
        }
      }
    },
    zh_CN: {
      messages: {
        required () {
          return i18n.t('message.formColumnEmpty')
        },
        email () {
          return i18n.t('message.formMailWrong')
        },
        numeric () {
          return i18n.t('message.formNumberEmpty')
        },
        max (field, length) {
          return i18n.t('message.formCharacterOverMax', { max: length })
        },
        min (field, length) {
          return i18n.t('message.formCharacterOverMin', {min: length})
        },
        requireOneNumeric (field) {
          return i18n.t('message.formNumericeOverOne')
        },
        confirmed () {
          return i18n.t('message.pleaseConfirmPassword')
        }
      }
    }
  }
})

// account.vue
// min:8 就會限制最少 8 個字元
// ref 是對應到第二個 input 的 confirmed:confirmPassword，就可以做二次密碼的確認
// VeeeValidate 會一步步從左驗證到右

<input-verify
    v-model="currentUser.password"
    type="password"
    :placeholder="$t('editing.newPassword')"
    name="verifyNewPassword"
    v-validate="'required|min:8|requireOneNumeric'"
    ref="confirmPassword"
>

// 當文字有誤時，就會 show 出錯誤提示文字，裡頭的 'verifyNewPassword' 字串是相對應 input 的 name

<div
    class="input-error error-text"
    v-show="errors.has('verifyNewPassword')"
>
    {{ errors.first('verifyNewPassword') }}
</div>

<input-verify
    v-model="currentUser.verifyPassword"
    type="password"
    :placeholder="$t('editing.confirmNewPassword')"
    name="verifyPasswordCheck"
    v-validate="'required|min:8|requireOneNumeric|confirmed:confirmPassword'"
>
</input-verify>

<div
    class="input-error error-text"
    v-show="errors.has('verifyPasswordCheck')"
>
    {{ errors.first('verifyPasswordCheck') }}
</div>

...

// 記得先將 validator inject 進 component

export default {
inject: ['$validator'],

...