【Vue.js】VeeValidateのカスタムルールで他のフィールドの値を利用する

こんにちは、”はふぃ”です。

VeeValidateとはVue.jsでフォームバリデーションを行う際に利用すると便利なパッケージです。

VeeValidate：https://baianat.github.io/vee-validate/

使い方

基本

標準で準備されているrequired(必須)やnumber(数値)などのバリデーションルールの他に、自分でカスタムしたバリデーションルールは以下のように利用することができます。

< html >

<input
  name="month"
  type="text"
  v-model="month"
  v-validate="'checkMonth'"
/>

< js >

VeeValidate.Validator.extend('checkMonth', {
  getMessage: field => `正しい値(月)を入力してください。`,
  validate (val) {
    // 空 & 数値チェック
    if (!val || isNaN(val)) return false
    // 1 ~ 12かどうかチェック
    if (parseInt(val) < 1 || parseInt(val) > 12) return false

    return true
  }
})

他のフィールドの値を利用する

上記では一つのルール(checkMonth)に対して一つのフィールド(month)しか利用していませんでしたが、以下のように一つのルール内で他のフィールドの値を使いたい場合があります。

< html >

<input
  name="month"
  type="text"
  v-model="month"
  v-validate="'checkMonth'"
/>
<input
  name="year"
  type="text"
  v-model="year"
/>

< js >

VeeValidate.Validator.extend('checkMonth', {
  getMessage: field => `正しい値(月)を入力してください。`,
  validate (val) {
    // 空 & 数値チェック
    if (!val || isNaN(val)) return false
    // 1 ~ 12かどうかチェック
    if (parseInt(val) < 1 || parseInt(val) > 12) return false

    // ここで"年"も含めて、フォームの値が現在より未来の日付かチェックしたい
    // ("月"だけでは現在より未来かどうかがわからない)

    return true
  }
})

このような場合にはhasTargetというオプションを利用します。

hasTarget：https://baianat.github.io/vee-validate/guide/custom-rules.html#target-dependant-rules

追加で利用したい他フィールドにrefを設定し、コロン区切りで引数を渡して、VeeValidateにhasTarget: trueを設定することで他フィールドの値を利用することができます。

< html >

<input
  name="month"
  type="text"
  v-model="month"
  v-validate="'checkMonth:$yearForm'"
/>
<input
  name="year"
  type="text"
  v-model="year"
  ref="yearForm"
/>

< js >

VeeValidate.Validator.extend('checkMonth',
  {
    getMessage: field => `正しい値(月)を入力してください。`,
    validate (val, [otherVal]) {
      // 空 & 数値チェック
      if (!val || isNaN(val)) return false
      // 1 ~ 12かどうかチェック
      if (parseInt(val) < 1 || parseInt(val) > 12) return false

      // 未来の日付かどうかチェック
      const now = new Date()
      if (otherVal &amp;&amp; now.getTime() > Date.parse(`${otherVal}/${val}/01`)) return false

      return true
    }
  },
  { hasTarget: true }
)