福岡開発センターの野田です。
年度末ということで忙しい日々を過ごしています。
弊社では、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” |
|
type | “number” |
|
type | “date” |
|
type | “datetime-local” |
|
date_format: YYYY-MM-DDThh:mm |
|
type | “time” |
or
depending on the step value |
type | “week” |
|
type | “month |
|
min | val |
|
max | val |
|
pattern | rgx |
|
required | none |
|
maxlength | “val” |
|
minlength | “val” |
|
これを無効化する方法は以下のコードとなります。useConstraintAttrs: false のオプションを指定することでInferred Rulesの設定を無効化することができます。Inferred Rulesはカスタムルールより優先度が高いため、結構扱いが難しいな、と感じています。どこでも使われるようなもののためそういう実装になっているのでしょうけど、メッセージをカスタマイズしたいときは足かせになりました。
|
[crayon-670dfe930bb24329150780 ]import { configure, ValidationObserver, ValidationProvider } from 'vee-validate' // type=emailなど推定バリデータが使われるものを無効化。 configure({ useConstraintAttrs: false }) |
[/crayon]
こういう設定調整ができるのは、しっかりポイントが抑えられていて人気のライブラリであることを感じます。また何かTipsが出てきたときは紹介したいと思います。