VeeValidate サンプル集

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

Vue.js: https://jp.vuejs.org/
VeeValidate: http://vee-validate.logaretm.com/
## examples
jsFiddleのSample交えつつみると秒速理解かもしれません。
### 数値指定と文字数制限（おまけでmax_value）
[Sample](https://jsfiddle.net/pdo99/bj344xp4/) 

```html
<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](http://vee-validate.logaretm.com/rules.html#rule-min), [min_value](http://vee-validate.logaretm.com/rules.html#rule-min_value)もあります。

### 文字列の指定（おまけでrequired, regex）
[Sample](https://jsfiddle.net/pdo99/tb6cuLbw/)

```html
<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](https://jsfiddle.net/pdo99/ntp0hqcp/)

```html
<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)](https://jsfiddle.net/pdo99/z6gx1spx/)

```html

<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)](https://jsfiddle.net/pdo99/09dptdcb/4/)

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

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