タグ: VeeValidate

福岡開発センターの野田です。
年度末ということで忙しい日々を過ごしています。

弊社では、Vuejs/Nuxtjsを使った開発を行っています。フロントでの値検査を行う場面も増えてきたと思います。ある案件でフロントでの値検査にVeeValidateを利用していたのですが、カスタマイズした検査が有効にならず何でだろうと調べてみました。有効にならなかったのは、Inferred Rules というものが有効になっていてためであることが分かりました。

Inferred Rules

https://vee-validate.logaretm.com/v2/guide/inferred-rules.html#example

この Inferred Rules ですが、例えば type=”email” に対して VeeValidate をかけると何もしなくても email のバリデーションルールが適用されるというものになります。

対象となるinput属性と値は以下になります（上記サイトより抜粋）。

Attribute	value	Rule
type	“email”	email 1 email
type	“number”	decimal 1 decimal
type	“date”	date_format:YYYY-MM-DD 1 date_format:YYYY-MM-DD
type	“datetime-local”	date_format: YYYY-MM-DDThh:mm 1 date_format: YYYY-MM-DDThh:mm
type	“time”	date_format:hh:mm 1 date_format:hh:mm  or  date_format:hh:mm:ss 1 date_format:hh:mm:ss  depending on the step value
type	“week”	date_format:YYYY-Www 1 date_format:YYYY-Www
type	“month	date_format:YYYY-MM 1 date_format:YYYY-MM
min	val	min_value:val 1 min_value:val
max	val	max_value:val 1 max_value:val
pattern	rgx	regex: rgx 1 regex: rgx
required	none	required 1 required
maxlength	“val”	max: val 1 max: val
minlength	“val”	min: val 1 min: val

これを無効化する方法は以下のコードとなります。useConstraintAttrs: false のオプションを指定することでInferred Rulesの設定を無効化することができます。Inferred Rulesはカスタムルールより優先度が高いため、結構扱いが難しいな、と感じています。どこでも使われるようなもののためそういう実装になっているのでしょうけど、メッセージをカスタマイズしたいときは足かせになりました。

[/crayon]

こういう設定調整ができるのは、しっかりポイントが抑えられていて人気のライブラリであることを感じます。また何かTipsが出てきたときは紹介したいと思います。