Vue.jsのフォームバリデーションを実装する。

  • CREATE:2022-07-03
  • UPDATE:2022-07-10
Vue.js

画像:pixabayより

今回やること

ログイン認証のフォームバリデーションを実装します。

基本となるソースコード

ここから、書いていきましょう。(VScodeを使って書いてます。)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>
        <label for="email">メールアドレス</label>
        <input type="email" name="email" v-model="email" 　id="email" />
      </div>
      <div>
        <label for="password">パスワード</label>
        <input
          type="password"
          name="password"
          v-model="password"
          id="password"
        />
      </div>
      <div>
        <input type="submit" value="ログイン"  v-bind:disabled="check" />
      </div>
    </div>


    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          email: "",
          password: "",
        },
        computed:
        {
          check:function()
          {
             //ここに色々書いていきます。
          }
        }
      });
    </script>
  </body>
</html>




こうなればOKです。
僕はライブラリを使わずにバリデーションを行う場合、Vueの「computed」を使っています。
次にsubmitボタンにv-bind:disabledを追加します。

<input type="submit" value="ログイン" v-bind:disabled="check" />


事例1:メールアドレスとパスワードをそれぞれ1文字以上入力しているか

computed: {
    check: function () {
        //メールアドレスとパスワードを入力している場合
        if (this.email && this.password) {
            return false;
        } 
        //違う場合
        else {
            //ボタンを押せなくする
            return true;
        }
    },
},


事例2:メールアドレスとパスワードがそれぞれの形式に合っているか

  • メールアドレス:○○○@○○○.○○○
  • 半角数字、半角小文字、半角大文字をそれぞれ1文字ずつ＆8文字～20文字まで
computed: {
    check: function () {
        //メールアドレスとパスワードの形式を満たす場合
        if (this.email.match(/[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+/) && this.password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]{8,20}$/))
        {
            return false;
        }
        //違う場合
        else {
            return true;
        }
    },
},


あとがき

Vue.jsは本当に便利です。