Vue でフォーム検証を実装する方法

Web アプリケーションの継続的な開発に伴い、フォーム検証は徐々に Web 開発プロセスに不可欠な部分になってきました。 Vue では、フォーム検証も非常に重要な機能です。この記事では、Vue を使用してフォーム検証を実装するための基本的な方法とテクニックを紹介します。

1. 基本的な検証

フォーム検証の基本は、ユーザー フォームに入力されたデータを検証して、データの正確性を確認することです。 Vue では、Vue 独自の v-model ディレクティブを使用してフォーム要素の値をバインドし、v-bind ディレクティブを使用して検証ルールをバインドできます。同時に、コンポーネントのデータに変数を設定して、フォーム要素の検証結果を記録することができます。

たとえば、ユーザー名とパスワードの検証機能を実装するフォーム コンポーネントを定義できます。

<template>
  <div>
    <label>用户名：</label>
    <input v-model="username" type="text" v-bind:class="{ error: !validUsername }">
    <span v-if="!validUsername">请输入合法的用户名！</span>
    <br>
    <label>密码：</label>
    <input v-model="password" type="password" v-bind:class="{ error: !validPassword }">
    <span v-if="!validPassword">请输入合法的密码！</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      validUsername: true,
      validPassword: true
    }
  },
  watch: {
    // 监听用户名输入框的值变化
    username() {
      this.validUsername = this.username.length > 3
    },
    // 监听密码输入框的值变化
    password() {
      this.validPassword = this.password.length > 5
    }
  }
}
</script>

上記のコードでは、v-model ディレクティブを使用してユーザー名とパスワードの入力をバインドします。ボックスの価値。次に、v-bind ディレクティブを使用して検証ルールをバインドします。入力ボックスの値が不正な場合は、「error」という名前の CSS クラス名を入力要素に追加します。最後に、watch を使用して入力ボックスの値の変化を監視し、さまざまな検証ルールに従って対応する検証ステータスを設定します。

2. カスタム検証ルール

一部の特殊なフォーム要素については、検証ルールをカスタマイズする必要があります。 Vue では、計算メソッドを使用して計算プロパティを定義し、フォーム要素の値を計算し、検証結果を取得できます。たとえば、携帯電話番号検証ルールをカスタマイズできます。

<template>
  <div>
    <label>手机号码：</label>
    <input v-model="phone" type="text" v-bind:class="{ error: !validPhone}">
    <span v-if="!validPhone">请输入合法的手机号码！</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      validPhone: false
    }
  },
  computed: {
    validPhone() {
      const reg = /^1[3456789]d{9}$/ //定义手机号码正则表达式
      return reg.test(this.phone) //返回验证结果
    }
  }
}
</script>

上記のコードでは、計算メソッドを使用して計算属性 validPhone を定義し、入力された携帯電話番号を検証します。まず、携帯電話番号の正規表現が定義され、次にテスト メソッドを使用して、入力ボックスの値が正規表現に準拠しているかどうかが検証されます。一致する場合は true を返し、一致しない場合は false を返します。

3. 非同期検証

データ検証をサーバーから取得する必要がある場合や、Ajax やその他の方法で検証する必要がある場合など、一部の特殊なシナリオでは、非同期検証を使用する必要があります。 Vue では、Vue が提供する axios ライブラリや fetch API を使用してデータを取得したり、Promise を使用して非同期処理の結果を処理したりできます。

たとえば、axios ライブラリを使用して非同期検証を実装できます。

<template>
  <div>
    <label>邮箱：</label>
    <input v-model="email" type="text" v-bind:class="{ error: !validEmail }">
    <span v-if="!validEmail">请输入合法的邮箱地址！</span>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      email: '',
      validEmail: false
    }
  },
  watch: {
    email() {
      if (this.email === '') {
        return
      }
      axios.get('/api/checkEmail', { //请求后台接口
        params: {
          email: this.email
        }
      }).then((response) => {
        if (response.data.success) {
          this.validEmail = true
        } else {
          this.validEmail = false
        }
      }).catch(() => {
        this.validEmail = false
      })
    }
  }
}
</script>

上記のコードでは、axios.get メソッドを使用してリクエストを送信し、入力ボックスをパラメータとして背景インターフェイスを提供します。正常に返された場合は、validEmail の値を true に設定し、それ以外の場合は false に設定します。

つまり、Vue でのフォーム検証の実装は比較的簡単で、上記の 3 つの部分 (基本検証、カスタム検証ルール、非同期検証) に従うだけです。同時に、Vue の柔軟性により、より複雑なフォーム検証関数を実装することができます。この記事の紹介があなたの Vue 開発作業に少しでも役立つことを願っています。

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