November 22, 2019

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

免用正規表示式


文 / 西打藍 Siddharam

前言


上周為了做登入頁面的密碼強度設定,而去了解 vue VeeValidate 驗證套件,它可以驗證 input 裡的值,讓你不需寫正規表達式,就能輕鬆做完限制式。

開始


我的密碼有四條限制:一是不能空白、二是至少有八個字元、三是至少含一個數字、四是需與二次確認密碼相同。除了「至少需含一個數字」,在套件中沒有提供,需要客製化之外,其他都有內建。

接著,我們就來實作。



// 安裝 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'],

...


其他的檢驗方式:

errors.first('field') 顯示欄位field的第一個出錯資訊
errors.collect('field') 顯示欄位field的所有出錯資訊
errors.has('field') 判斷fileds欄位是否檢驗有誤
erros.all() 顯示所有的出錯資訊
errors.any() 判斷是否有錯誤


閱讀量




聯絡與合作


有文章撰寫、網站設計(UI/UX)、平面設計、網站工程需求,皆可以來信詢問,在關於下方有參考作品。

或是想分享心情、聊聊天、交朋友,可以來秘密通道讓我知道唷。

Email: aaa24295234@gmail.com