☰
ねころぶろぐ

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

PROGRAM

今回は、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では以下のようになります。

var app = new Vue({
  el: '#app',
  data: {
    errors: {name:'', email:''},
    name: null,
    email: null,
  },
  computed: {
    isSubmitDisabled() {
      return Object.keys(this.errors).length > 0 ? true : false
    }
  },
  watch: {
    name: function(){
      if (!this.name){
        this.$set(this.errors, "name", '名前が入力されていません。')
      } else if(this.name.length > 10) {
        this.$set(this.errors, "name", '名前は10文字以下で入力してください。')
      } else {
        this.$delete(this.errors, 'name')
      }
    },
    email: function(){
      if (!this.email){
        this.$set(this.errors, "email", 'メールアドレスが入力されていません。')
      } else if(!this.validEmail(this.email)) {
        this.$set(this.errors, "email", '有効なメールアドレスを入力してください。')
      } else {
        this.$delete(this.errors, 'email')
      }
    }
  },
  methods: {
    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);
    }
  }
});

watchプロパティでリアルタイムのバリデーションを行います。

また、isSubmitDisabledプロパティで、バリデーションが通るまで、送信ボタンを押せないようにしています。

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