2017/10/27

Vue.jsのフォームバリデーションはHTML5 input要素の設定で十分かもしれない

Labels: , ,
Vue.jsでフォームバリデーションをするとき、以前ならvue-validatorという公式コンポーネントがあった。しかし、vue@2.0のリリースにともない公式から外れてしまった。

そのため、何か良いFormValidatorがないか調べていたのだが、HTML5 input要素のバリデーション用の属性を思い出した。

ということで、HTM5 input要素の設定でフォームバリデーションを行う。

HTML5 inputの設定でフォームバリデーションを行う 


<div id="app">
  <form @submit.prevent="onsubmit">
    <div class="form-group">
      <label>Name</label>
      <input
        class="form-control"
        v-model="form.name"
        type="text"
        required
        placeholder="bc_rikko">
    </div>
    <div class="form-group">
      <label>Birth date</label>
      <input
        class="form-control"
        v-model="form.birth"
        type="date">
    </div>
    <div class="form-group">
      <label>Age</label>
      <input
        class="form-control"
        v-model="form.age"
        type="number"
        min="0"
        max="999"
        placeholder="19">
    </div>
    <div class="form-group">
      <label>Email address</label>
      <input
        class="form-control"
        v-model="form.email"
        type="email"
        placeholder="love-vuejs@example.com">
    </div>
    <div class="form-group">
      <label>Blog URL</label>
      <input
        class="form-control"
        v-model="form.blog"
        type="url"
        placeholder="https://kuroeveryday.blogspot.com">
    </div>
    <div class="form-group">
      <label>ID</label>
      <input
        class="form-control"
        v-model="form.id"
        type="text"
        title="Custome ID(xxxx9999)"
        pattern="^[a-z]{4}[0-9]{4}$"
        placeholder="xxxx9999">
    </div>

    <div class="form-group">
      <button
        class="btn btn-primary"
        type="submit">Submit</button>
    </div>
  </form>
  <pre>{{ result }}</pre>
</div>
new Vue({
  el: "#app",
  data () {
    return {
      form: {},
      result: {}
    }
  },
  methods: {
    onsubmit () {
      this.result = Object.assign({}, this.form);
    }
  }
});

コードを見ていただいてわかるように、JavaScript（Vue.js内）では一切バリデーションを行っていない。

使っているのはinputのtypeやmaxlength、requiredという属性だけだ。
ボタンにはv-on:click（@click）は設定せずに、<form @submit.prevent="onsubmit">のようにイベントをサブスクライブしている。
input要素のバリデーションが走るのがsubmitイベントのときなので、ボタンにイベントを設定してしまうとバリデーションが実行されないためだ。

ちなみに@submit="onsubmit"ではなく@submit.prevent="onsubmit"としている理由は、本来submitイベントが発生するとページがリロードされてしまうのだが、preventを使ってページリロードを抑制するためだ。
.preventに指定すると内部的にevent.preventDefaultが呼ばれるため、イベントが中断（リロードを抑制）できる。


このサンプルコードの例では、以下のようなバリデーションを行っている。
  • Name
    • 文字列のみ
    • 必須項目
  • Birth date
    • 年月日のみ
  • Age
    • 数値のみ
    • 範囲は0〜999まで
  • Email address
    • email形式（xxx@example.com）のみ
  • Blog URL
    • URL形式のみ
  • ID
    • 文字列のみ
    • /^[a-z]{4}[0-9]{4}$/形式のみ



Input要素で指定できる属性について


すべてを紹介するにはあまりにも分量が多いので、よく使う属性のみピックアップして紹介する。

よく使うtype属性

  • text: 文字列のみ
  • number: 数値のみ
  • date: 日付のみ
  • email: メールアドレスの形式のみ
  • url: URLの形式のみ

よく使うグローバル属性

属性を指定することによって、inputフィールドに制限をつけられる。
  • type: text, number, dateなど入力フィールドのコントロールを指定する
  • required: 必須項目
  • min: type="number or date"のときの最小値
  • max: type="number or date"のときの最大値
  • minlength: 入力できる最小文字数
  • maxlength: 入力できる最大文字数
  • pattern: 入力値を検査する正規表現、title属性を設定することでエラー時にパターンの説明が表示できる


その他については、input 要素 | MDNを参照ください。

小規模アプリケーション、または単純なフォームバリデーションだけであれば、ライブラリやコンポーネントを使わなくても十分だろう。
複雑なバリデーションは、onsubmit内で実行すればよい。

ただし、HTML5 input要素の標準メッセージを使いたくない場合は、入力値チェックのほかにメッセージ表示の処理も必要なので、楽したいならライブラリの導入も考えたほうが良いかもしれない。



参考サイト






以上

written by @bc_rikko
時刻:
Labels: , ,

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )