Vue.jsでのリアルタイムバリデーションの方法【現役エンジニアが解説】

今回は、Vue.jsでのリアルタイムバリデーションの方法について、簡単に解説していきます。

Vue.jsでのリアルタイムのバリデーション

Vue.jsではバインディングさせてバリデーションを行います。

バリデーションの内容自体はリアルタイムか否かに影響されません。

しかし、発火の仕方はwatchプロパティを使ってバリデーションさせる形となります。

HTML

まずHTMLのサンプルは以下のとおりです。

<div id="app">
  <form>
    <p>
      <label for="name">名前</label>
      <input id="name" v-model="name" type="text" name="name">
      <span>{{ errors.name }}</span>
    </p>
    
    <p>
      <label for="email">メール</label>
      <input id="email" v-model="email" type="email" name="email">
      <span>{{ errors.email }}</span>
    </p>
    
    <button type="submit" :disabled="isSubmitDisabled">送信</button>
  </form>
</div>

v-modelでinput要素とバインディングさせるところはリアルタイムでない場合と同じです。

リアルタイムのため、エラーメッセージはまとめて１か所に表示させるのではなく、input要素の隣に出力させています。

Vue.js

Vue.jsでは以下のようになります。