Vue テクノロジー開発でフォームの動的検証と送信を実行する方法

Vue テクノロジ開発でフォームの動的な検証と送信を実行するには、特定のコード サンプルが必要です

Vue 開発では、フォームの動的な検証と送信が非常に重要です 共通のニーズ。 Vue のデータ バインディングとコマンド システムを通じて、これらの機能を簡単に実装できます。この記事では、Vue を使用してフォームを動的に検証および送信する方法を、具体的なコード例とともに紹介します。

1. フォーム検証

フォーム検証は、ユーザー入力の有効性と合法性を確認するための重要なステップです。 Vue では、カスタム命令と計算されたプロパティを通じてフォーム検証を実装できます。

まず、ユーザーが入力したデータにバインドされるフォームのデータ モデルを定義する必要があります。たとえば、ユーザー名とパスワードを含むログイン フォームがあります。

data() {
return {

form: {
  username: '',
  password: ''
},
errors: {
  username: '',
  password: ''
}

}
}

次に、 Vue のコマンド システムを使用して、フォーム検証ルールを定義できます。たとえば、ユーザー名を検証したいとします。ユーザー名を空にすることはできず、長さが 3 ～ 10 文字であることを要求します。この検証ルールを実装するカスタム ディレクティブを定義できます:

Vue.directive('username', {
binding: function (el, binding, vnode) {

el.addEventListener('input', function () {
  var value = el.value;
  if (value.length < 3 || value.length > 10) {
    vnode.context.errors.username = '用户名必须为3到10个字符';
  } else {
    vnode.context.errors.username = '';
  }
});

}
});

テンプレートでは、v-username ディレクティブを使用してフォーム要素をバインドし、検証エラー メッセージを表示できます。

ユーザー名:

{{errors.username }} span>

上記のコードにより、ユーザーが入力ボックスにユーザー名を入力すると、入力内容に基づいて動的に検証され、次のようなエラー メッセージが表示されます。リアルタイムで表示されます。

2. フォーム送信

フォーム送信は、ユーザーが送信したデータを処理のためにバックエンドに送信するプロセスです。 Vue では、イベントと AJAX リクエストを使用してフォーム送信を実装できます。

まず、フォームを送信するメソッドを定義する必要があります:

methods: {
submitForm: function () {

// 执行表单提交的逻辑
// ...

}
}

次に、テンプレートの v-on ディレクティブを使用してフォーム送信イベントをバインドし、フォームを送信するメソッドを呼び出します:

上記のコードを通じて、ユーザーがフォームの送信ボタンをクリックすると、 submitForm メソッドがトリガーされてフォームが送信されます。

上記は、Vue を使用したフォームの動的検証と送信の一般的な手順です。特定のニーズに応じて、検証ルールと送信ロジックを追加できます。 Vue のデータ バインディングとコマンド システムを通じて、さまざまなフォームの検証および送信機能を簡単に実装できます。

以上がVue テクノロジー開発でフォームの動的検証と送信を実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。