☰
ねころぶろぐ

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

PROGRAM

今回は、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では、バリデーションのメソッドを以下のように実装します。

var app = new Vue({
  el: '#app',
  data: {
    errors: [],
    name: null,
    email: null
  },
  methods: {
    checkForm: function (e) {
      this.errors = [];
      
      if (!this.name) {
        this.errors.push("名前が入力されていません。");
      } else if (this.name.length > 10) {
        this.errors.push("名前は10文字以下で入力してください。");
      }
      
      if (!this.email) {
        this.errors.push('メールアドレスが入力されていません。');
      } else if (!this.validEmail(this.email)) {
        this.errors.push('有効なメールアドレスを入力してください。');
      }
      
      if (!this.errors.length) {
        return true;
      }
      
      e.preventDefault();
    },
    validEmail: function (email) {
      var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }
  }
});

基本的には、バインディングしたプロパティをチェックするだけです。

エラーがあれば、エラーメッセージを表示するためにerrorsプロパティに追加し、フォームを送信しないようにします。

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