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

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

Vue.jsでのバリデーション

Vue.jsでのバリデーションが必要かという声はたまに聞きます。

主な理由としては、サーバ側で必ずバリデーションを行っているためです。

しかし、サーバ側に無用な負荷をかけない等の目的でVue.jsのバリデーションが必要となるケースは多いです。

HTML

まずHTMLのサンプルを以下に示します。

<div id="app">
  <form>
    <p v-if="errors.length">
      <ul>
        <li v-for="error in errors">{{ error }}</li>
      </ul>
    </p>
    
    <p>
      <label for="name">名前</label>
      <input id="name" v-model="name" type="text" name="name">
    </p>
    
    <p>
      <label for="email">メール</label>
      <input id="email" v-model="email" type="email" name="email">
    </p>
    
    <button type="submit" @click="checkForm">送信</button>
  </form>
</div>

v-modelでinput要素とバインディングさせておきます。

さらに、エラーメッセージが表示できるように、errorsプロパティの各要素を表示させるようにしておきます。

Vue.js

Vue.jsでは、バリデーションのメソッドを以下のように実装します。