VeeValidate サンプル集 #JavaScript

はじめに

Vue.jsで実装されているフロントにおいて汎用的なフォームバリデーションには、
VeeValidateを使っていて、よく使うものをまとめてメモするコーナーです。

Vue.js: https://jp.vuejs.org/
VeeValidate: http://vee-validate.logaretm.com/

examples

jsFiddleのSample交えつつみると秒速理解かもしれません。

数値指定と文字数制限（おまけでmax_value）

<div id="app">
  <p>
    <h4>option: numeric and max:length</h4>
    <input v-validate="'numeric|max:10'" type="text" name="num1">
    <br>
    <span v-if="errors.has('num1')">{{ errors.first('num1') }}</span>
  </p>
  <p>
    <h4>option: numeric and max_value:value</h4>
    <input v-validate="'max_value:10'" type="text" name="num2">
    <br>
    <span v-if="errors.has('num2')">{{ errors.first('num2') }}</span>
  </p>
</div>

'numeric|max:10'で数値で10文字以内と指定できる。
ちなみにmax_valueではnumericを書かなくても指定した数値以外ではエラーとなる
max_valueでは文字数ではなく、数値の大きさを判定する。
min, min_valueもあります。

文字列の指定（おまけでrequired, regex）

Sample

<div id="app">
  <p>
    <h4>option: required and alpha</h4>
    <input v-validate="'required|alpha'" type="text" name="num01">
    <br>
    <span v-if="errors.has('num01')">{{ errors.first('num01') }}</span>
  </p>
  <p>
    <h4>option: alpha_dash</h4>
    <input v-validate="'alpha_dash'" type="text" name="num02">
    <br>
    <span v-if="errors.has('num02')">{{ errors.first('num02') }}</span>
  </p>
  <p>
    <h4>option: alpha_num</h4>
    <input v-validate="'alpha_num'" type="text" name="num03">
    <br>
    <span v-if="errors.has('num03')">{{ errors.first('num03') }}</span>
  </p>
  <p>
    <h4>option: alpha_spaces</h4>
    <input v-validate="'alpha_spaces'" type="text" name="num04">
    <br>
    <span v-if="errors.has('num04')">{{ errors.first('num04') }}</span>
  </p>
  <p>
    <h4>option: regex(カタカナ)</h4>
    <input v-validate="'regex:^([ァ-ヴ][ァ-ヴー・]*)$'" type="text" name="num06">
    <br>
    <span v-if="errors.has('num06')">{{ errors.first('num06') }}</span>
  </p>
</div>

'required'はそのinputタグが必須入力であることを指定する。
alphaシリーズはアルファベット（大文字小文字問わず）を許可し、＋αを次のように指定できる。
alpha_dash: alpha + -_ + numericを許可。
alpha_num: alpha + numericを許可。
alpha_spaces: alpha + (スペース)を許可。
regex:正規表現による一致／不一致を判定できる。（sampleではカナ判定をお試し）

formでよく使うあれこれ

Sample

<div id="app">
  <p>
    <h4>option: confirmed</h4>
    <input v-validate="'required|alpha|confirmed:confirmedNum01'" type="text" name="num01">
    <br>
    <input type="text" name="confirmedNum01">
    <br>
    <span v-if="errors.has('num01')">{{ errors.first('num01') }}</span>
  </p>
  <p>
    <h4>option: email</h4>
    <input v-validate="'email'" type="text" name="num02">
    <br>
    <span v-if="errors.has('num02')">{{ errors.first('num02') }}</span>
  </p>
  <p>
    <h4>option: url</h4>
    <input v-validate="'url:false'" type="text" name="num03">
    <br>
    <span v-if="errors.has('num03')">{{ errors.first('num03') }}</span>
  </p>
  <p>
    <h4>option: radio button</h4>
    <p class="control">
      <label class="radio">
        <input name="radio_group_1" v-validate="'required|in:1'" value="1" type="radio">
        Option 1
      </label>
      <label class="radio">
        <input name="radio_group_1" value="2" type="radio">
        Option 2
      </label>
    </p>
    <span class="help is-danger" v-show="errors.has('radio_group_1')">{{ errors.first('radio_group_1') }}</span>
  </p>
  <p>
    <h4>option: select box</h4>
      <p class="control">
        <label class="checkbox">
          <input name="terms" v-validate="'required'" type="checkbox">
          agree.
        </label>
        <br>
        <span class="help is-danger" v-show="errors.has('terms')">
          {{ errors.first('terms') }}
        </span>
      </p>
  </p>
</div>

confirmed:メールアドレスやパスワードなど確認入力の許可。
email: メールアドレス形式を許可。
url: URL形式を許可。
radioButtonやselectboxではrequireを使って必須入力とした。inで項目を制限することもできる。

data-* Attributes

地味に便利ながら説明があっさりしているdata-* Attributesも載せときます。
Sample1(as, delay, name)


<div id="app">
  <p>
    <h4>use data-vv-as</h4>
    <input v-validate="'alpha'" type="text" name="num01" placeholder="not use">
    <br>
    <span v-if="errors.has('num01')">{{ errors.first('num01') }}</span>
  </p>
  <p>
    <input v-validate="'alpha'" data-vv-as="フォーム氏" type="text" name="vvNum01" placeholder="use data-vv-as">
    <br>
    <span v-if="errors.has('vvNum01')">{{ errors.first('vvNum01') }}</span>
  </p>
   <p>
    <h4>use data-vv-delay</h4>
    <input v-validate="'alpha'" type="text" name="num02" placeholder="not use">
    <br>
    <span v-if="errors.has('num02')">{{ errors.first('num02') }}</span>
  </p>
  <p>
    <input v-validate="'alpha'" data-vv-delay="3000" type="text" name="vvNum02" placeholder="use data-vv-as">
    <br>
    <span v-if="errors.has('vvNum02')">{{ errors.first('vvNum02') }}</span>
  </p>
  <p>
    <h4>use data-vv-name</h4>
    <input v-validate="'alpha'" type="text" name="num03" placeholder="not use">
    <br>
    <span v-if="errors.has('num03')">{{ errors.first('num03') }}</span>
  </p>
  <p>
    <input v-validate="'alpha'" data-vv-name="customName" type="text" name="vvNum01" placeholder="use data-vv-name">
    <br>
    <span v-if="errors.has('customName')">{{ errors.first('customName') }}</span>
  </p>
</div>

data-vv-as:name属性をかえることなく、エラー表示に使われるフィールド名を設定できる。
data-vv-delay: 検証までの時間を㍉秒で設定できる。
data-vv-name: name属性をかえることなく、検証等に使われるフィールド名を設定できる。

Sample2(validate-on)

<div id="app">
  <p>
    <h4>use data-vv-validate-on</h4>
    <input v-validate="'alpha'" type="text" name="Num01" placeholder="not use">
    <br>
    <span v-if="errors.has('Num01')">{{ errors.first('Num01') }}</span>
  </p>
  <p>
    <input v-validate="'alpha'" type="text" data-vv-validate-on="none" name="Num02" placeholder="use data-vv-validate-on none">
    <br>
    <span v-if="errors.has('Num02')">{{ errors.first('Num02') }}</span>
  </p>
  <p>
    <input v-validate="'alpha'" type="text" data-vv-validate-on="blur" name="Num03" placeholder="use data-vv-validate-on blur">
    <br>
    <span v-if="errors.has('Num03')">{{ errors.first('Num03') }}</span>
  </p>
</div>

data-vv-validate-on: デフォルトではリアルタイムバリデーションとなっているのをオフにしたり,focusoutにしたり設定できる。

まとめ

とっても便利に使えそうですね。