VeeValidate サンプル集

More than 1 year has passed since last update.


はじめに

Vue.jsで実装されているフロントにおいて汎用的なフォームバリデーションには、

VeeValidateを使っていて、よく使うものをまとめてメモするコーナーです。

Vue.js: https://jp.vuejs.org/

VeeValidate: http://vee-validate.logaretm.com/


examples

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


数値指定と文字数制限(おまけでmax_value)

Sample

<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にしたり設定できる。


まとめ

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