VeeValidate

• 公式ドキュメント ¹⁾
• カスタムルールの使用も可能

• よく使うバリデーション例

v-validate="{
    required: true, // 必須
    regex: /^[a-zA-Z0-9_\-]*$/ // 正規表現(万能)
}"

v-validate="{
    min: 0, // 最小文字数
    max: 100 // 最大文字数
}"

v-validate="{
    min_value: 0, // 最小値
    max_value: 100, // 最大値
    decimal: 0, // 小数点の許容範囲っぽい？
    integer: 0 // int型許容？
}"

• This rule can recieve any args from validator.js isURL validator.とのこと
  • 要はここ参照ということ

• require_protocol
  • if set as true isURL will return false if protocol is not present in the URL.
  • 主に使うのはこいつかな？

v-validate="{
    max: 2048, // URLの最大値がこのくらいだとか
    url: {
        required_protocol: true
    }
}"

• 公式ドキュメント ²⁾
• メソッド内でもバリデーションをかけることができる

import { Validator } from 'vee-validate'

const result = await new Validator().verify('test', 'max:3')

if (result.errors.length !== 0) {
  // Error
}

• 手動でバグを発生させることでビュー側での検知も可能 ³⁾

import { ErrorBag } from 'vee-validate'

new ErrorBag().add({
  field: 'auth',
  msg: 'Wrong Credentials'
})

• input要素と競合したりするので、工夫が必要
• 下記のようなコードだと、inputとVeeValidateの2種類でバリデーションがかかってしまう

<b-field>
  <input
    required
    v-validate="{
      required: true
    }"
  >
  <span>
    {{ errors.first('XXX') }}
  </span>
  ...
  ...
  ...
  <input
    required
    v-validate="{
      required: true
    }"
  >
  <span>
    {{ errors.first('XXX') }}
  </span>
</b-field>

• inputのバリデーションはb-fieldなどで区切られうるため、ラップすると直ったりする
  • 上記の場合だとさらにspanと競合するため、spanの内容はb-fieldのメッセージなどに置換するとうまくいく