Vue.js フォームバリデーション(vuelidate) #Vue.js

導入編
[Vuelidate公式]https://vuelidate.js.org/#sub-basic-usage
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >

  <title>Vue</title>
</head>
<body>

  <div id="app" class="container mt-5">
    <h2>{{ title }}</h2>
    <div class="row">
      <div class="col-sm-8">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="name">名前:</label>
            <input type="name" 
                   id="name" 
                   v-model="name" 
                   @input="$v.name.$touch()"
                   :class="{ error : $v.name.$error,'form-control': true }"
            >

            <span v-if="$v.name.$error">名前が入力されていません。</span>
          </div>
          <div class="form-group">
            <label for="age">年齢:</label>
            <input type="age" class="form-control" id="age" v-model="age">
          </div>
          <div class="form-group">
            <label for="email">メールアドレス:</label>
            <input type="email" 
                   id="email" 
                   v-model="email" 
                   @blur="$v.email.$touch()"
                   :class="{ error : $v.email.$error,'form-control': true }"
                  >
            <div v-if="$v.email.$error">
              <span v-if="!$v.email.required">メールドレスが入力されていません。</span>
              <span v-if="!$v.email.email">メールアドレスの形式が正しくありません。</span>
            </div>
          </div>
          <button type="submit" class="btn btn-info">送信</button>
        </form>
      </div>
    </div>
    <pre>{{$v}}</pre>


  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/vuelidate.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/validators.min.js"></script>
  <script>
    Vue.use(window.vuelidate.default);
    const { required, email } = window.validators;
    app = new Vue({
      el: '#app',
      data: {
        title: '入力フォームバリデーション',
        name: '',
        age: '',
        email: '',
      },
      validations: {
        name: {
          required,
        },
        email: {
          required,
          email
        }
      },
      methods: {
        submitForm() {
          this.$v.$touch()
          if (this.$v.$invalid) {
            console.log('バリデーションエラー');
            console.log('invalid name', this.$v.name.$invalid)
            console.log('invalid age', this.$v.age.$invalid)
            console.log('invalid email', this.$v.email.$invalid)
            console.log('invalid 結果', this.$v.$invalid)
          } else {
            console.log('submit');
          }
        }
      }
    })
  </script>

  <style>
    body {
        font-family: Verdana, Geneva, "sans-serif";
    }
    input {
        border: 1px solid silver;
        border-radius: 4px;
        background: white;
        padding: 5px 10px;
        font-size: 1.2em;
    }
    .dirty {
        border-color: forestgreen;
        background: mintcream;
    }
    .error {
      color: #8a0421;
      border-color: #dd0f3b;
      background-color: #ffd9d9;
    }
  </style>
</body>
</html>