Vue.jsでフォームを検証する方法

投稿日: 2022-04-20 2022-10-11
タグ: Development, javascript, Vue.js

序章

フォーム検証は、フォームフィールド検証とも呼ばれ、ユーザーがWebフォームのすべての必須フィールドに入力することを保証します。フィールドに無効な値がある場合、エラーメッセージが表示され、値がすべてのルールを満たすまでフォームの送信が妨げられます。

テンプレート駆動型検証は、ディレクティブを使用して検証ルールをフォーム要素に直接設定するフォーム検証の一種です。

テンプレート駆動型の検証をVue.jsに実装するには、VeeValidateを使用できます。 VeeValidateは、入力フィールドを検証してエラーを表示できるようにするVue.jsのプラグインです。

これは、このチュートリアルで作成するもののアニメーション画像です。

このチュートリアルの最後に、VeeValidateを使用して入力フィールドを検証する登録フォームがあります。

前提条件

このチュートリアルは、JavaScriptの文字列とオブジェクトの知識があることを前提としています。 Vueにある程度精通していると有益ですが、必須ではありません。 Javascriptの詳細については、Javascriptでコーディングする方法シリーズをご覧ください。

さまざまなクラウドホストライブラリへの参照を含む単一のローカルHTMLファイルの構築に焦点を当てます。使用可能です @vue/cli Vueプロジェクトを作成し、パッケージマネージャーを使用してインストールする vee-validate; ただし、そのアプローチはこのチュートリアルの範囲外です。

ステップ1—VeeValidateを使用してVue.jsプロジェクトを設定する

Vue.jsフレームワークとVeeValidateライブラリが必要になります。

まず、ターミナルを使用して、という名前の新しいファイルを作成します register.html:

nano register.html

そして、ウェブページの初期コードを追加します。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Vue Template Form Validation</title>
</head>
<body>

  <!-- ... -->

</body>
</html>

Vue.jsのブラウザビルドは、 cdnjs. VeeValidateのブラウザビルドは、 jsdelivr. 両方をに追加します <body> の register.html ファイル：

<body>

  <!-- include the Vue.js framework -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

  <!-- include the VeeValidate library -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vee-validate.min.js"></script>

</body>

これらのファイルは、CDN（コンテンツ配信ネットワーク）によって提供されます。ローカルにダウンロードまたは保存するものはありません。

これで、Vue.jsとVeeValidateの最新の安定したバージョン（この記事の執筆時点）を使用する準備ができたWebページができました。

BootstrapとFontAwesomeの追加

スタイリングを確立するには、Bootstrapを使用できます。図像を追加するには、 FontAwesomeを利用することもできます。

BootstrapおよびFontAwesomeのブラウザビルドは、 BootstrapCDN. 両方をに追加します <head> の register.html ファイル：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Vue Template Form Validation</title>

  <!-- include the Bootsrap framework -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <!-- include Font Awesome -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

この時点で、Vue、VeeValidate、Bootstrap、およびFontAwesomeがあります。次に、検証するフォームを作成します。

フォームマークアップの作成

このサンプルフォームは、ユーザーから5つの情報を求めます。あなたが必要になります name, email, username, password、と password_confirmation.

まず、フォームの初期マークアップをフォームに追加します <body> の register.html 前のファイル <script> タグ：

<body>
  <div class="container my-3">
    <div class="row justify-content-around">
      <div class="col-6 rounded shadow">
        <h1 class="py-3">Sign up once and watch any of our free demos.</h1>
        <div id="signup-form">
          <form>

          <!-- ... form fields ... -->

          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- ... library script tags ... -->
</body>

このコードは空を確立します <form> レイアウトと外観にいくつかのBootstrapユーティリティを使用します。

次に、フォームフィールドをに追加します <form>. のフィールドから始めます name:

<form>

  <div class="form-group">
    <label for="name">Your Name</label>
    <div class="input-group">
      <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span></span>
      <input type="text" id="name" name="name" placeholder="Name" class="form-control" />
    </div>
  </div>

</form>

このコードは <label> 為に name、FontAwesomeアイコン fa-user、と <input> 為に name.

あなたはに同様の追加を行うことができます <form> その他の情報については—email, username, password、と password_confirmation:

<form>

  <!-- ... name ... -->

  <div class="form-group">
    <label for="email">Your Email</label>
    <div class="input-group">
      <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope" aria-hidden="true"></i></span></span>
      <input type="email" id="email" name="email" placeholder="[email protected]" class="form-control" />
    </div>
  </div>

  <div class="form-group">
    <label for="username">Username</label>
    <div class="input-group">
      <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-users" aria-hidden="true"></i></span></span>
      <input type="text" id="username" name="username" placeholder="Enter your username" class="form-control" />
    </div>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <div class="input-group">
      <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span>
      <input type="password" id="password" name="password" placeholder="Enter a password" class="form-control" />
    </div>
  </div>

  <div class="form-group">
    <label for="password_confirmation">Confirm Password</label>
    <div class="input-group">
      <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span>
      <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Re-type password" class="form-control" />
    </div>
  </div>

</form>

このコードは作成します <label>s、Font Awesomeアイコン、および <input>s。各入力には固有のものがあります id と name.

登録用のボタンを追加して、 <form>:

<form>

  <!-- ... form fields ... -->

  <div class="form-group">
    <button type="submit" class="btn btn-block btn-lg btn-primary">Register</button>
  </div>

</form>

このコードは、ブートストラップスタイルを使用して大きな送信ボタンを作成します。

開くことができます register.html アプリの進行状況を確認するには、Webブラウザで。

ステップ2—Vueインスタンスの作成とマウント

次に、Vueインスタンスを作成し、 #signup-form.

新しいを追加します <script> の最後にあるタグ <body> 定義します signupForm:

<body>
  <!-- ... form ... -->
  <!-- ... library script tags ... -->

  <script>
    const signupForm = new Vue({
      el: '#signup-form'
    });
  </script>
</body>

プロパティをに追加します data 物体：

<body>
  <!-- ... form ... -->
  <!-- ... library script tags ... -->

  <script>
    const signupForm = new Vue({
      el: '#signup-form',
      data: {
        name: '',
        email: '',
        username: '',
        password: '',
        password_confirmation: ''
      }
    });
  </script>
</body>

次に、プロパティを参照します v-model 各フィールドで。

のために name フィールドに、以下を追加します。

<input type="text" id="name" name="name" placeholder="Name" class="form-control" v-model="name" />

のために email フィールドに、以下を追加します。

<input type="email" id="email" name="email" placeholder="[email protected]" class="form-control" v-model="email" />

のために username フィールドに、以下を追加します。

<input type="text" id="username" name="username" placeholder="Enter your username" class="form-control" v-model="username" />

のために password フィールドに、以下を追加します。

<input type="password" id="password" name="password" placeholder="Enter a password" class="form-control" v-model="password" />

最後に、 password_confirmation フィールドに、以下を追加します。

<input type="password" id="password_confirmation" name="password_confirmation" placeholder="Re-type password" class="form-control" v-model="password_confirmation" />

この時点で、次のモデルを含むVueインスタンスがあります。 name, email, username, password、と password_confirmation.

ステップ3—追加 `ValidationObserver` と `ValdiationProvider`

次に、登録する必要があります ValidationObserver と ValidationProvider.

両方を新しいものに追加できます <script> の最後にタグを付ける <body>:

<body>
  <!-- ... form ... -->
  <!-- ... library script tags ... -->

  <script>
    Vue.component('validation-observer', VeeValidate.ValidationObserver);

    Vue.component('validation-provider', VeeValidate.ValidationProvider);
  </script>

  <!-- ... vue instance script tag ... -->
</body>

今、あなたは使用することができます <validation-observer> 全体を包む <form>. そして、あなたは使用することができます <validation-provider> フィールドをラップするには：

<validation-observer>

  <form>

    <div class="form-group">
      <validation-provider>
        <label for="name">Your Name</label>
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span></span>
          <input type="text" id="name" name="name" placeholder="Name" class="form-control" v-model="name" />
        </div>
      </validation-provider>
    </div>

    <div class="form-group">
      <validation-provider>
        <label for="email">Your Email</label>
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope" aria-hidden="true"></i></span></span>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="form-control" v-model="email" />
        </div>
      </validation-provider>
    </div>

    <div class="form-group">
      <validation-provider>
        <label for="username">Username</label>
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-users" aria-hidden="true"></i></span></span>
          <input type="text" id="username" name="username" placeholder="Enter your username" class="form-control" v-model="username" />
        </div>
      </validation-provider>
    </div>

    <div class="form-group">
      <validation-provider>
        <label for="password">Password</label>
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span>
          <input type="password" id="password" name="password" placeholder="Enter a password" class="form-control" v-model="password" />
        </div>
      </validation-provider>
    </div>

    <div class="form-group">
      <validation-provider>
        <label for="password_confirmation">Confirm Password</label>
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span>
          <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Re-type password" class="form-control" v-model="password_confirmation" />
        </div>
      </validation-provider>
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-block btn-lg btn-primary">Register</button>
    </div>

  </form>

</validation-observer>

これで、で作成されたフォームができました <validation-observer> と <valdiation-provider>.

ステップ4—VeeValidateルールの使用

VeeValidateルールは、1つ以上のフィールドに入力できるものに制限または条件を設定します。検証が必要なフィールドを含むレコードを更新すると、検証ルールがチェックされます。ルールに違反すると、トラップ可能なエラーが発生します。

たとえば、 required バリデーター：

<validation-provider rules="required">

パイプ文字で区切られた複数の検証に合格できます（|).

たとえば、 required そしてその email バリデーター：

<validation-provider rules="required|email">

または、オブジェクトを渡して柔軟性を高めることもできます。

<validation-provider :rules="{ required: true, email: true, regex: /[0-9]+/ }">

これで、入力が変更されるたびに、バリデーターは検証のリストを左から右に実行し、入力が検証に失敗するたびにエラーヘルパーオブジェクトにデータを入力します。

このチュートリアルを書いている時点で、VeeValidateにはフォーム検証用の 30のルールがあり、独自のルールを作成するオプションがあります。

ルールの適用

次に、インポートする必要があります VeeValidateRules.

あなたはそれを新しいものに追加することができます <script> の最後にタグを付ける <body> の register.html ファイル：

<body>
  <!-- ... form ... -->
  <!-- ... library script tags ... -->

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rules.umd.js"></script>

  <!-- ... vue instance tags ... -->
</body>

次に、ルールをループして、すべてを使用可能にすることができます。

<body>
  <!-- ... form ... -->
  <!-- ... library script tags ... -->

  <script>
    Object.keys(VeeValidateRules).forEach(rule => {
      VeeValidate.extend(rule, VeeValidateRules[rule]);
    });
  </script>

  <!-- ... vue instance tags ... -->
</body>

そして適用する required すべての入力のルール：

<validation-provider rules="required">

複数のルールを適用する

為に email、有効な電子メールアドレスにもルールを適用します。

<validation-provider rules="required|email">

為に password また、最小長のルールを適用します 6 文字：

<validation-provider rules="required|min:6">

今、あなたは持っています required, email、と min フィールドのルール。

クロスフィールド検証の適用

為に password_confirmation の値と一致する必要があります password 有効であるために。これを達成するために、あなたは頼りになります ValidationObserver、これにより password_confirmation 知っておくべき password.

追加します vid に password フィールド、そう password_confirmed ターゲットがあります：

<validation-provider rules="required|min:6" vid="password">

追加します confirmed のルール password_confirmation フィールド、そう password_confirmed その値をの値と比較します password:

<validation-provider rules="required|confirmed:password">

今、あなたは持っています required, email, min、と confirmed フィールドのルール。

カスタムルールの追加

VeeValidateを使用すると、カスタム検証ルールとメッセージを次のように記述できます。 extend と validate.

ユーザーが制限された単語で登録できないようにするルールを追加します。この例では、ユーザーが単語を使用することを制限します admin, password、と administrator:

<body>
  <!-- ... form ... -->
  <!-- ... library script tags ... -->

  <script>
    // Declare an array of usernames that are invalid.
    const restricted_usernames = [
      'admin',
      'password',
      'administrator'
    ];

    // Extend the custom rule.
    VeeValidate.extend('checkuser', {
      name: 'Restricted Usernames',
      validate: value => {
        return restricted_usernames.includes(value.toLowerCase()) ? false : !! value
      },
      message: 'That {_field_} is unavailable.',
    });
  </script>

  <!-- ... vue instance tags ... -->
</body>

カスタムルールをに追加します username 分野：

<validation-provider rules="required|checkuser">

今、あなたは持っています required, email, min, confirmed、と checkuser フィールドのルール。ルールがすべて確立され、エラーメッセージの表示を開始できるようになりました。

ステップ5—VeeValidateエラーとフラグへのアクセス

VeeValidateには errors 利用可能。 VeeValidateには、状態情報用の複数のフラグもあります。 Vueを使用してこれらにアクセスできます v-slot.

Vueも使用します v-show VeeValidateエラーメッセージを表示し、Bootstrapを使用するには invalid-feedback エラーをスタイリングするためのクラス。

さらに、VeeValidateフラグを使用して dirty, valid、と invalid Vueと組み合わせて v-bind:class とブートストラップの is-valid と is-invalid フィールドをスタイリングするためのクラス：

<validation-observer>

  <form>

    <div class="form-group">
      <validation-provider rules="required|alpha" v-slot="{ dirty, valid, invalid, errors }">
        <label for="name">Your Name</label>
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span></span>
          <input type="text" id="name" name="name" placeholder="Name" class="form-control" v-model="name" v-bind:class="{ 'is-valid': dirty && valid, 'is-invalid': dirty && invalid }" />
        </div>
        <div class="invalid-feedback d-inline-block" v-show="errors">{{ errors[0] }}</div>
      </validation-provider>
    </div>

    <div class="form-group">
      <validation-provider rules="required|email" v-slot="{ dirty, valid, invalid, errors }">
        <label for="email">Your Email</label>
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope" aria-hidden="true"></i></span></span>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="form-control" v-model="email" v-bind:class="{ 'is-valid': dirty && valid, 'is-invalid': dirty && invalid }" />
        </div>
        <div class="invalid-feedback d-inline-block" v-show="errors">{{ errors[0] }}</div>
      </validation-provider>
    </div>

    <div class="form-group">
      <validation-provider rules="required|checkuser" v-slot="{ dirty, valid, invalid, errors }">
        <label for="username">Username</label>
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-users" aria-hidden="true"></i></span></span>
          <input type="text" id="username" name="username" placeholder="Enter your username" class="form-control" v-model="username" v-bind:class="{ 'is-valid': dirty && valid, 'is-invalid': dirty && invalid }" />
        </div>
        <div class="invalid-feedback d-inline-block" v-show="errors">{{ errors[0] }}</div>
      </validation-provider>
    </div>

    <div class="form-group">
      <validation-provider rules="required|min:6" vid="password" v-slot="{ dirty, valid, invalid, errors }">
        <label for="password">Password</label>
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span>
          <input type="password" id="password" name="password" placeholder="Enter a password" class="form-control" v-model="password" v-bind:class="{ 'is-valid': dirty && valid, 'is-invalid': dirty && invalid }" />
        </div>
        <div class="invalid-feedback d-inline-block" v-show="errors">{{ errors[0] }}</div>
      </validation-provider>
    </div>

    <div class="form-group">
      <validation-provider rules="required|confirmed:password" v-slot="{ dirty, valid, invalid, errors }">
        <label for="password_confirmation">Confirm Password</label>
        <div class="input-group">
          <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span>
          <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Re-type password" class="form-control" v-model="password_confirmation" v-bind:class="{ 'is-valid': dirty && valid, 'is-invalid': dirty && invalid }" />
        </div>
        <div class="invalid-feedback d-inline-block" v-show="errors">{{ errors[0] }}</div>
      </validation-provider>
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-block btn-lg btn-primary">Register</button>
    </div>

  </form>

</validation-observer>

この時点で、にアクセスできます dirty, valid, invalid、と errors. 関連するフィールドの下にフィードバックとしてエラーメッセージを表示するロジックを追加しました。フィールドが相互作用して無効な場合、ブートストラップが適用されます is-invalid クラス。フィールドが相互作用して有効な場合、ブートストラップが適用されます is-valid クラス。

次のステップでは、フォームの送信を処理します。

ステップ6—フォーム送信の処理

VeeValidateは、 invalid のフラグ ValidationObserver と handleSubmit 関数。 Vueを使用してこれらにアクセスできます v-slot:

<validation-observer v-slot="{ invalid, handleSubmit }">

Vueのイベント修飾子を使用して、フォームの送信をキャプチャします。 @submit.prevent. VeeValidateも使用します handleSubmit すべてのフィールドが有効になるまでフォームの送信を防ぐには：

<form @submit.prevent="handleSubmit(onSubmit)">

これは onSubmit これは、 console.log メッセージ：

<script>
  const signupForm = new Vue({
    el: '#signup-form',
    data: {
      name: '',
      email: '',
      username: '',
      password: '',
      password_confirmation: ''
    },
    methods: {
      onSubmit: function() {
        console.log('Form has been submitted!');
      }
    }
  });
</script>

維持する <button> で disabled フィールドが存在する間は情報を送信しないように状態を設定します invalid:

<button type="submit" class="btn btn-block btn-lg btn-primary" v-bind:disabled="invalid">Register</button>

この時点で、開くことができます register.html Webブラウザーでフォームを操作し、検証をテストします。

結論

このチュートリアルでは、テンプレート駆動型アプローチを使用してフォーム入力を検証する方法を示しました。 VeeValidateを使用すると、既存のルールを使用してフォーム入力を検証し、新しいルールを拡張し、エラーを表示し、フォーム送信を処理できます。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036

序章