こんにちは、”はふぃ”です。
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 && now.getTime() > Date.parse(`${otherVal}/${val}/01`)) return false
return true
}
},
{ hasTarget: true }
)