Vue.js によるリアルタイムフォームバリデーション方法 メモ

• よく見かけるフォーム入力時にリアルタイムでチェック結果を表示する機能をVue.jsで実現する方法についてメモする。

実装例

• アカウント登録画面でメールアドレスバリデーションを行うケースを想定した実装例。

• 処理の流れ

  1. メールアドレスプロパティを監視する。

  2. 値の変更を検知し、入力チェックメソッド呼び出す。

  3. チェック結果に合わせてメッセージ表示を行う。

• フォーム

  • 入力判定結果isValidの値に応じて、エラーメッセージリストerrorsの表示制御を行う。

       <form id="form" v-on:submit.prevent="createUser">
          <input
            type="email"
            v-model="mailaddress"
            placeholder="[e-mail]"
          />
          <input
            type="password"
            v-model="password"
          />
          <input type="submit" value="Create User" />
        </form>
  	  <ul v-show="!isValid">
           <li v-for="item in errors" :key="item.message">
              {{ item.message }}
           </li>
        </ul>
  

• スクリプト

  export default {
    data: function () {
      return {
        mailaddress: "",
        password: "",
        isValid: true,// 入力チェック結果
        errors: [],	// エラーメッセージリスト 
      };
    },
    watch: {
      // メールアドレスプロパティウォッチャ
      mailaddress: function () {
        this.errors = [];
        this.isValid = true;
        // メールアドレス入力チェックメソッド呼び出し
        if (
          !this.checkNotNull(this.mailaddress) ||
          !this.checkFormat(this.mailaddress)
        ) {
          this.isValid = false;
        }
      },
    },
    methods: {
      // メールアドレス入力チェックメソッド：不正な入力の場合、対応するエラーメッセージを格納する。
      // nullチェック
      checkNotNull: function (inputdata) {
        var result = true;
        if (!inputdata) {
          this.errors.push({ message: "メールアドレスを入力してください。" });
          result = false;
        }
        return result;
      },
      // 形式チェック
      checkFormat: function (inputdata) {
        var result = true;
        var re = /^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/i;
        result = re.test(inputdata);
        if (!result) {
          this.errors.push({ message: "メールアドレス形式で入力してください。" });
        }
        return result;
      },
      ...
  

参考情報

• フォームのバリデーション

• 算出プロパティとウォッチャ

• Vue.jsでフォームバリデーションを作ってみよう！