Vue ドキュメントで入力ボックスのキャリッジ リターン イベントと検証機能を使用する方法

Vue は、応答性の高いデータ バインディングとコンポーネント システムを中核とする人気のある JavaScript フロントエンド フレームワークです。 Vue アプリケーションでは、入力ボックスは最も一般的に使用される UI 要素の 1 つです。ユーザーがテキストを入力するとき、復帰イベントをリッスンし、送信する前に入力を検証したいと考えています。この記事では、Vue ドキュメントでの入力ボックスの Enter イベントと検証関数の使用法を紹介します。

1. Vue での入力ボックスの Enter イベント

Vue で入力ボックスの Enter イベントを監視するのは非常に簡単で、@keydown を使用するだけです。 enter 修飾子を使用すると、復帰イベントを監視できます。例:

<template>
  <div>
    <input v-model="content" @keydown.enter="submitForm">
    <button @click="submitForm">提交</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    submitForm() {
      // 提交表单代码
    }
  }
}
</script>

上記のコードでは、v-model ディレクティブを使用して、content 属性と入力ボックスの値をバインドします。 Enter キーを押すか、「送信」ボタンをクリックすると、submitForm メソッドが呼び出され、フォームが送信されます。

2. Vue の入力ボックスの検証関数

Vue でフォームの入力内容を検証する場合、フォーム データの整合性と正確性を保証するチェック関数を記述することができます。この関数は、フォームが送信される前に呼び出して、入力されたデータを確認できます。以下は、関数を使用してフォーム データを検証する例です。

<template>
  <div>
    <input v-model="username" @blur="checkUsername">
    <input v-model="password" @blur="checkPassword">
    <button @click="submit">提交</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      usernameError: '',
      passwordError: ''
    }
  },
  methods: {
    checkUsername() {
      if (!this.username) {
        this.usernameError = '用户名不能为空';
      } else {
        this.usernameError = '';
      }
    },
    checkPassword() {
      if (!this.password) {
        this.passwordError = '密码不能为空';
      } else {
        this.passwordError = '';
      }
    },
    submit() {
      this.checkUsername();
      this.checkPassword();
      if (!this.usernameError && !this.passwordError) {
        // 提交表单代码
      }
    }
  }
}
</script>

上記のコードでは、v-model ディレクティブを通じて username と ## をバインドします。 #password属性と入力ボックスの値。 checkUsername メソッドと checkPassword メソッドの入力ボックスの内容を確認します。検証が失敗した場合は、対応するエラー メッセージを設定し、そうでない場合は、エラー メッセージを空に設定します。 「送信」ボタンをクリックすると、submit メソッドを呼び出して入力を確認し、フォームを送信します。

@keydown.enter 修飾子を使用してキャリッジ リターン イベントをリッスンし、入力内容を検証するチェック関数を記述することで、シンプルで信頼性の高いフォーム処理を実現できます。 Vue の開発において、これらのスキルを理解し習得することは、フロントエンド アプリケーションをより効率的に実装するのに役立ちます。

以上がVue ドキュメントで入力ボックスのキャリッジ リターン イベントと検証機能を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。