こんにちは、”はふぃ”です。
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 } )