Vue ドキュメントのフォーム検証機能の使用方法

Vue は、ユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークです。 Vue の焦点は、ほぼすべてのプロジェクトで使用できるそのシンプルさと柔軟性です。フロントエンド開発者として、フォーム検証で関数を使用する必要があることがよくあります。 Vue のドキュメントにはいくつかのフォーム検証関数が用意されており、これは非常に実用的であり、開発者がフォーム検証をより効率的に完了するのに役立ちます。この記事では、Vueドキュメントでフォームバリデーション機能を使用する方法を紹介します。

まず、v-model を使用して、Vue テンプレートのフォーム フィールドの値をバインドする必要があります。たとえば、次のコードは v-model を使用して入力ボックスの値をバインドします。

<template>
  <div>
    <input type="text" v-model="username">
  </div>
</template>

Vue のドキュメントでは、フォーム検証関数は Vue のインスタンス メソッド $validator に含まれています。フォーム検証機能を使用するには、まず Vue.use(VeeValidate) を通じて VeeValidate プラグインを導入する必要があります。これは、Vue 用に公式に推奨されているフォーム検証プラグインです。

VeeValidate を導入した後、created() メソッドなど、Vue インスタンスのライフサイクルで $validator メソッドを呼び出すことができます。 Vue インスタンスは作成時に初期化が行われます。

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';  // 引入VeeValidate插件
Vue.use(VeeValidate);  // 使用VeeValidate
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {  // 将验证器语言设置为中文
      messages: {
        required: (field) => `${field}不能为空`,
      },
    });
  }
}

上記のコードの created() メソッドでは、this.$validator.localize() メソッドを使用してバリデーターの言語を設定します。中国語に翻訳し、カスタム エラー メッセージを定義します。ここの required はデフォルトの VeeValidate ルールで、このフィールドが必須であることを示します。この例では、カスタム エラー メッセージは「ユーザー名を空にすることはできません」です。

ここで、カスタム VeeValidate ルール checkUsernameAvailable を定義します。この場合、ユーザー名が利用可能かどうかを確認するために使用されます。このルールでは、入力ボックスにバインドされた値にアクセスできるため、Axios リクエストの POST メソッドを使用してその値をサーバーに送信できます。返された結果がデータ ステータス コード 200 の場合は、ユーザー名が使用可能であることを意味します。それ以外の場合は、ユーザー名が使用できないことを意味します。

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import axios from 'axios';
Vue.use(VeeValidate);
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {
      messages: {
        required: (field) => `${field}不能为空`,
        checkUsernameAvailable: (field) => `${field}已经被注册了`,
      },
    });

    this.$validator.extend('checkUsernameAvailable', {
      getMessage: (field, params, data) => data.message,
      validate: async (value) => {
        const { data } = await axios.post('/api/checkusername', {
          username: value,
        });
        return {
          valid: data.status === 200,
          data: data,
        };
      },
    });
  }
}
</script>

上記のコードでは、カスタム関数 checkUsernameAvailable を使用して検証ルールを定義します。この関数は、非同期/await を使用して Axios の POST メソッドの応答を待機します。応答のステータス コードが 200 の場合は true が返され、それ以外の場合は false が返されます。

最後に、この検証ルールを HTML フォームにバインドする必要があります。 data-vv-validate 属性を form 要素に追加します。これにより、Vue Validator にフォームの検証を開始するように指示されます。次に、検証が必要なフォーム要素にカスタム ルール v-validate="{ rules: { checkUsernameAvailable: true } }" を追加します。これにより、Vue Validator にカスタム検証ルールを使用するように指示されます。

<template>
  <div>
    <form @submit.prevent="">
      <div>
        <input type="text" name="username" v-model="username" data-vv-validate="''" v-validate="{ rules: { checkUsernameAvailable: true } }" placeholder="请输入用户名">
        <div v-show="errors.has('username')" class="invalid-feedback">{{ errors.first('username') }}</div>
      </div>
      <button @click="submitForm">提交</button>
    </form>
  </div>
</template>

上記のコードでは、エラー メッセージが空でない場合に、入力ボックス v-show="errors.has('username')" にエラー メッセージを追加しました。というメッセージが表示されます。

これで、カスタム検証ルールの作成とバインドが完了しました。ユーザー名入力ボックスの値がサーバー側で使用可能な場合、フォームはデータを送信します。それ以外の場合、Vue Validator はカスタム エラー メッセージを表示します。

全体として、Vue Validator は非常に強力で使いやすいフォーム検証プラグインです。 Vue は、フロントエンド開発者がフォーム検証を迅速に開発するための優れたプラットフォームを提供します。Vue Validator の使用は理解しやすく、開発効率を大幅に向上させることができます。

以上がVue ドキュメントのフォーム検証機能の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。