Vue でフォームデータ検証を実装するにはどうすればよいですか?-Vue.js-php.cn

Vue でフォームデータ検証を実装するにはどうすればよいですか?

王林

リリース： 2023-06-27 09:39:23

オリジナル

2623 人が閲覧しました

Vue は、フル機能の Web アプリケーションを迅速に開発するのに役立つ多くの機能を提供する、非常に強力なフロントエンドフレームワークです。これには、ユーザーが入力したデータが合法で、有効で、期待どおりであることを保証する非常に重要な機能であるフォームデータ検証が含まれます。 Vue には、フォームデータ検証を実装するためのさまざまな方法がいくつか用意されており、この記事ではそのいくつかを詳しく紹介します。

Vue 独自のフォーム検証命令

Vue はいくつかの組み込み命令を受け入れ、テンプレート内で直接使用してフォームを検証できます。これには、v-model、v-bind、v-on などのディレクティブが含まれます。これらの命令は、フォーム値を処理するときに Vue インスタンスのデータにバインドでき、また、他の命令と一緒に使用して、より複雑なフォーム検証を実装することもできます。

次の例は、v-model および v-on ディレクティブを使用して、フォーム入力ボックスの電子メールアドレスが有効かどうかを確認する方法を示しています。

<template>
  <div>
    <input v-model="email" @blur="validateEmail" type="email" name="email" required>
    <div v-if="validEmail === false">请输入一个有效的邮箱地址。</div>
  </div>
</template>

<script>
export default {
  data() {
    // 初始值为空
    return {
      email: '',
      validEmail: null
    };
  },
  methods: {
    validateEmail() {
      const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
      this.validEmail = reg.test(this.email);
    }
  }
}
</script>

ログイン後にコピー

この例では、validateEmail メソッドの実行結果を追跡するために、属性 validEmail を元のデータに追加しました。次に、入力ボックスの v-model および v-on ディレクティブと、フォーカスを失ったときにトリガーされる @blur イベントをバインドします。。 @blur イベントでは、validateEmail() メソッドが入力値を正規表現と比較し、一致する場合は、validEmail プロパティを ## に設定します。 #true; それ以外の場合は、false に設定されます。最後に、v-if ディレクティブを使用してエラーメッセージを表示します。

Vue 独自のフォーム検証手順に加えて、フォーム検証の実装に役立ついくつかのオープンソースプラグインを使用することもできます。。最も一般的に使用されるプラグインの 1 つは VeeValidate です。これは、

required、email、min_length などの多くの検証ルールを提供する、テンプレートベースのフォーム検証プラグインです。さらに、独自のビジネスニーズに合わせてルールをカスタマイズできます。

<template>
  <div>
    <input v-model="email" name="email" v-validate="'required|email'">
    <div v-show="errors.has('email')" class="text-danger">{{ errors.first('email') }}</div>
  </div>
</template>

<script>
import { required, email } from 'vee-validate/dist/rules';
import { extend } from 'vee-validate';
import { ValidationProvider, ValidationObserver, localize } from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN.json';

extend('required', required);

extend('email', email);

localize('zh_CN', zh_CN);

export default {
  data() {
    return {
      email: ''
    };
  },
  components: {
    ValidationProvider,
    ValidationObserver
  }
}
</script>

ログイン後にコピー

この例では、まず必要なコンポーネントとメソッドを VeeValidate にインポートします。次に、入力を検証するための特定の命令を指定する

v-validate 属性を追加しました。このディレクティブのパラメータは、required や email など、適用する検証ルールを指定します。ディレクティブに似たものを使用してカスタムルールを構築することもできます。

組み込み命令とプラグインに加えて、手動メソッドを使用してフォーム検証を実行することもできます。 Vue でフォーム入力を手動で検証するサンプルコードを次に示します。

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input type="text" v-model="username">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    handleSubmit() {
      if (this.username === '') {
        alert('用户名不能为空！');
        return;
      }

      alert('提交成功！');
    }
  }
}
</script>

ログイン後にコピー

この例では、まず

v-model を使用して、入力ボックスの値をコンポーネントの にバインドします。ユーザー名属性。次に、@submit.prevent を使用してフォームの送信イベントをリッスンし、データ検証のための handleSubmit メソッドを実装します。このメソッドでは、最初にユーザー名が空かどうかを確認し、空の場合はユーザーにプロンプトを表示し、フォームが送信されないようにします。それ以外の場合は、成功メッセージが表示されます。

概要

上記は、Vue でフォームデータを検証するいくつかの方法です。 Vue の組み込み命令により、簡単かつ迅速な検証が可能になります。 VeeValidate プラグインを使用すると、フォームルールの定義を効率的かつ多様に実装できます。手動によるフォーム検証は面倒なだけでなく、コードが長くなり、コードのメンテナンスの問題が発生しやすくなります。したがって、実際のビジネスニーズに基づいて、適切なフォーム検証方法を選択することが非常に重要です。

以上がVue でフォームデータ検証を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。