jQueryフォーム検証の書き方

フロントエンド開発では、フォーム検証は必須のスキルです。フォーム検証により、ユーザーが入力したデータの正確性と合法性が保証され、データエラーの可能性が効果的に低減され、ユーザーに優れたエクスペリエンスがもたらされます。この記事では、jQuery を使用してフォームを検証する方法を紹介します。

フレームワークとプラグイン

jQuery を使用してフォームを検証する場合、開発効率とコードの品質を向上させるために、いくつかの優れたフレームワークとプラグインを使用することを選択できます。一般的なフォーム検証フレームワークとプラグインは次のとおりです。

1. jQuery Validation
   jQuery Validation は非常に人気のあるフォーム検証プラグインで、簡単な設定と原則を通じてフォーム内のデータを自動的に検証できます。 。さらに、jQuery 検証は、必須フィールド、最小長、最大長、正規表現、リモート検証などを含む複数の検証タイプをサポートします。
2. Bootstrap Validator
   Bootstrap Validator は、Bootstrap と jQuery に基づくフォーム検証プラグインです。必須フィールド、電子メール、パスワード、携帯電話番号、URL アドレスなどのさまざまな検証方法を提供し、カスタム検証ルールをサポートします。
3. FormValidation
   FormValidation は人気のあるフォーム検証フレームワークであり、Bootstrap や Foundation などのさまざまな JavaScript ライブラリとフレームワークを統合することを特徴としています。 FormValidation は、カスタム エラー メッセージ、非同期検証、便利な検証メソッド、および複数の検証ルールをサポートしています。

上記の 3 つのフレームワークとプラグインは使いやすく、柔軟性があり、変更可能であるため、開発者の注目に値します。

フォーム検証の実装

以下では、jQuery Validation プラグインを例として、jQuery を使用してフォームを検証する方法を紹介します。

1. jQuery と jQuery 検証の紹介

始める前に、必要な JavaScript ファイルを HTML ファイルに導入する必要があります。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

2. HTML コードの記述

HTML コードでは、最初にフォームを定義し、各フォーム要素に一意の ID を追加する必要があります。

<form id="myform">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br>

  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email"><br>

  <button type="submit">提交</button>
</form>

3. JavaScript コードの作成

JavaScript コードでは、まず検証ルールとエラー メッセージを設定し、次に validate() メソッドを呼び出して検証する必要があります。形状。フォームの検証が成功すると、フォームの送信など、対応する操作を実行できます。

$(document).ready(function() {
  $("#myform").validate({
    rules: {
      username: {
        required: true,
        minlength: 6
      },
      password: {
        required: true,
        minlength: 8
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      username: {
        required: "请输入用户名",
        minlength: "用户名长度必须大于等于6个字符"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度必须大于等于8个字符"
      },
      email: {
        required: "请输入电子邮件",
        email: "请正确填写有效的电子邮件地址"
      }
    },
    submitHandler: function(form) {
      // 表单通过验证后执行的操作
      form.submit();
    }
  });
});

上記のコードでは、 validate() メソッドを使用してフォームを検証します。 ここで、 rules 属性は検証ルールを定義し、messages 属性は対応するエラー メッセージを定義します。フォームが送信されると、submitHandler 属性によって関連する操作がトリガーされます。

jQuery 検証をフォーム検証に使用する場合は、まず jQuery および jQuery 検証スクリプトを HTML ファイルに導入し、jQuery の準備ができてからコードを実行する必要があることに注意してください。さらに、入力規則に関連付けるフォーム要素ごとに一意の ID を設定する必要もあります。

概要

この記事では、jQuery Validation プラグインを使用してフォームを検証する方法と、一般的なフォーム検証フレームワークおよびプラグインを学びました。実際の開発では、特定の状況に応じて適切なフォーム検証方法を選択し、さまざまな検証ルールやエラー プロンプトを使用して、フォーム データの正確性とセキュリティを確保できます。

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