Vue.jsで入力フォームにバリデーションをつける

はじめに

この記事はVue#2アドベントカレンダーの23日目です🎅

アドベントカレンダー初参加の@yakumomutsukiです。
当初は「vue-cliを使わなくてもできるvueを使った開発」を考えていたのですが、書いているうちにただのWebpackの説明になってしまったので、実務であるあるなお悩みを書いてみようと思いました。

バリデーション + 入力フォーム

フロントエンドの開発において、フォーム周りのバリデーションの設計は比較的悩みどころかなあと思います。zipというプロパティにたいして、watchを使ってバリデーションを張るか、computedを使うか、このあたりは実装者によってさまざまあると思います。

さまざまあるなかでの「私はこう実装した」という一例をご覧ください。

App.vue

<template>
  <div id="app">
    <div class="container">
      <form>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="email">メールアドレス（必須）</label>
            <input
              id="email"
              required
              type="email"
              class="form-control"
              :class="formError.email.className"
              name="email"
              placeholder="メールアドレスを入力してください"
              @change="e => update(e)"
              :value="formState.email"
            />
            <span>{{ formError.email.errorMessage }}</span>
          </div>
          <div class="form-group col-md-6">
            <label for="password">パスワード（必須）</label>
            <input
              id="password"
              required
              type="password"
              class="form-control"
              :class="formError.password.className"
              name="password"
              placeholder="パスワード"
              @change="e => update(e)"
              :value="formState.password"
            />
            <span>{{ formError.password.errorMessage }}</span>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="zip">郵便番号（必須）</label>
            <input
              id="zip"
              required
              type="text"
              class="form-control"
              :class="formError.zip.className"
              name="zip"
              placeholder="1000000"
              maxlen="7"
              @change="e => update(e)"
              :value="formState.zip"
            />
            <p>{{ formError.zip.errorMessage }}</p>
          </div>
          <div class="form-group col-md-4">
            <label for="state">都道府県（必須）</label>
            <select
              id="state"
              class="form-control"
              :class="formError.state.className"
              :value="formState.state"
              @change="e => update(e)"
              required
            >
              <option value="" selected>選択してください</option>
              <option value="tokyo">東京</option>
              <option value="osaka">大阪</option>
            </select>
            <p>{{ formError.state.errorMessage }}</p>
          </div>
          <div class="form-group col-md-4">
            <label for="city">市区町村（必須）</label>
            <input
              id="city"
              required
              type="text"
              class="form-control"
              :class="formError.city.className"
              name="city"
              placeholder="千代田区"
              @change="e => update(e)"
              :value="formState.city"
            />
            <p>{{ formError.city.errorMessage }}</p>
          </div>
        </div>
        <div class="form-group">
          <label for="address1">住所１（必須）</label>
          <input
            id="address1"
            required
            type="text"
            class="form-control"
            :class="formError.address1.className"
            name="address1"
            placeholder="秋葉原１－１－１"
            @change="e => update(e)"
            :value="formState.address1"
          />
          <p>{{ formError.address1.errorMessage }}</p>
        </div>
        <div class="form-group">
          <label for="address2">住所２</label>
          <input
            id="address2"
            type="text"
            class="form-control"
            name="address2"
            placeholder="秋葉原ビル１F"
            @change="e => update(e)"
            :value="formState.address2"
          />
        </div>
        <button class="btn btn-primary" @click="registration">登録する</button>
      </form>
    </div>
  </div>
</template>

<script>
const errorBase = {
  errorMessage: "",
  className: ""
};
const patterns = {
  password: /^(?=.*?[a-zA-Z])(?=.*?\d)[a-zA-Z\d]{8,16}$/,
  zip: /^[0-9]{7}$/,
  phoneNumber: /^[0-9]{10,11}$/
};

import isEmail from "validator/lib/isEmail";
import isMatch from "validator/lib/matches";

export default {
  name: "App",
  data() {
    return {
      formState: {
        email: "",
        password: "",
        zip: "",
        state: "",
        city: "",
        address1: "",
        address2: ""
      },
      formError: {
        email: { ...errorBase },
        password: { ...errorBase },
        zip: { ...errorBase },
        state: { ...errorBase },
        city: { ...errorBase },
        address1: { ...errorBase },
        address2: { ...errorBase }
      }
    };
  },
  methods: {
    /**
     * 値が更新されたらupdateメソッドが呼ばれる
     * formStateの値を更新したら、バリデーションを実行
     * @param e HTMLElement
     */
    update(e) {
      const { name, value } = e.target;
      this.formState[name] = value;
      this.formError[name] = { ...errorBase };

      this.validate(name);
    },

    /**
     * バリデーションを行います
     * 未入力チェックが必要な場合は、第2引数にfalseを指定する
     * @param name
     * @param allowBlank
     */
    validate(name, allowBlank = true) {
      const formVal = this.formState[name];

      // 未入力チェックをする場合
      if (!allowBlank && !formVal) {
        this.formError[name] = {
          errorMessage: "未入力です",
          className: "error"
        };
        return;
      }

      // メールアドレス
      if (name === "email" && formVal && !isEmail(formVal)) {
        this.formError[name] = {
          errorMessage: "メールアドレスに誤りがあります",
          className: "error"
        };
        return;
      }

      // パスワード
      if (
        name === "password" &&
        formVal &&
        !isMatch(formVal, patterns.password)
      ) {
        this.formError[name] = {
          errorMessage: "パスワードに誤りがあります",
          className: "error"
        };
        return;
      }

      // 郵便番号
      if (name === "zip" && formVal && !isMatch(formVal, patterns.zip)) {
        this.formError[name] = {
          errorMessage: "郵便番号に誤りがあります",
          className: "error"
        };
      }
    },

    /**
     * 登録処理を行います
     * バリデーションで引っかかった場合は、登録処理を行えません
     */
    registration() {
      for (let [key] of Object.entries(this.formState)) {
        // バリデーションを行わないのはcontinueで抜けておく
        if (key === "address2") {
          continue;
        }
        // バリデーションを実行
        this.validate(key, false);
      }

      let isValid = true;
      for (let [key] of Object.entries(this.formError)) {
        // エラーメッセージがない場合にはtrueになる
        isValid = !this.formError[key].errorMessage ? isValid : false;
      }

      if (isValid) {
        window.alert("登録に成功しました");
      } else {
        window.alert("入力不備があります");
      }
    }
  }
};
</script>

<style>
.error {
  background-color: #ffecec !important;
}
</style>

お気づきになりましたでしょうか。
このコードはwatchもcomputedも使っておりません。しかし、formStateとfromErrorの各プロパティのキー名を同じにしておくことで、updateメソッドからvalidateメソッドに同じキー名を渡して、バリデーションをかけることができています。

    update(e) {
      const { name, value } = e.target;
      this.formState[name] = value;
      this.formError[name] = { ...errorBase };

      this.validate(name);
    },

引数として受け取ったHTMLElementから、const { name, value } = e.target;のように分割代入して、nameとvalueを受け取り、formStateに値を設定、fromErrorの初期化して、もう一度バリデーションという流れになっています。

おわりに

書いていて思ったのですが、別にVueじゃなくてJavaScriptのテクニック感集ですね...。v-modelやwatch、computedは使わなくてもバリデーションはできますというお話でした。
明日のアドベントカレンダーは@kacky917さんです！！🎄