jQueryはフォーム検証を実装する

jQueryを使用してフォーム検証を実装します。参考までに、具体的な内容は次のとおりです。

登録.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>登録</title>
    <!--jQuery をインポート-->
    <script src="js/jquery-3.3.1.js"></script>
    <!--フォーム検証を実行する-->
    <スクリプト>
        /*
    フォームの検証:
     1. ユーザー名: 1 単語の文字、長さ 8 〜 20 文字 2. パスワード: 1 単語の文字、長さ 8 〜 20 文字 3. 電子メール: 電子メール形式 4. 名前: 空欄不可 5. 携帯電話番号: 携帯電話番号形式 6. 生年月日: 空欄不可*/
 
        // ユーザー名をチェック // 単語文字、長さ 8 ～ 20 文字 function checkUsername() {
            // 1. ユーザー名の値を取得します。 var username = $("#username").val();
            // 2. 検証正規表現を定義します。var reg_username = /^\w{8,20}$/;
            // 3. 検証要件が満たされているかどうかを判断し、プロンプトメッセージを表示します。var flag = reg_username.test(username);
            if (フラグ) {
                // 有効なユーザー名$("#username").css("border", "");
            } それ以外 {
                // ユーザー名が不正なので、赤い枠線を追加します $("#username").css("border", "1px solid red");
            }
            // 4. 検証に合格したかどうかを返す return flag;
        }
 
        // パスワードを確認する function checkPassword() {
            //1. パスワード値を取得します。 var password = $("#password").val();
            //2. 正規表現を定義する var reg_password = /^\w{8,20}$/;
            //3. 判断してプロンプト情報を提供する var flag = reg_password.test(password);
            if (フラグ) {
                //パスワードは有効です$("#password").css("border", "");
            } それ以外 {
                //パスワードが不正なので、赤い枠線を追加します $("#password").css("border", "1px solid red");
            }
            // 4. 戻りフラグが渡されるかどうかをチェックするために戻ります。
        }
 
        // メールを確認する関数 checkEmail() {
            //1. メールボックスを取得します。var email = $("#email").val();
            //2. 通常の [email protected] を定義する
            var reg_email = /^\w+@\w+\.\w+$/;
            //3. 判定 var flag = reg_email.test(email);
            if (フラグ) {
                $("#email").css("境界線", "");
            } それ以外 {
                $("#email").css("border", "1px の赤一色");
            }
            // 4. 戻りフラグが渡されるかどうかをチェックするために戻ります。
        }
 
        // 名前を確認する関数 checkName() {
            // 1. 名前を取得する var name = $("#name").val();
            // 2. 空でないかチェックし、チェックが成功したかどうかを返します if (typeof name == "undefined" || name == null || name == "") {
                $("#name").css("border", "1px の赤一色");
                false を返します。
            } それ以外 {
                $("#name").css("境界線", "");
                true を返します。
            }
        }
 
        // 電話番号を確認する function checkTelephone() {
            // 1. 電話番号を取得します。 var telephone = $("#telephone").val();
            // 2. 正規表現を定義します。 var reg_tel = /^1(3|4|5|6|7|8|9)\d{9}$/;
            // 3. 判定 var flag = reg_tel.test(telephone);
            if (フラグ) {
                $("#telephone").css("border", "");
            } それ以外 {
                $("#telephone").css("border", "1px の赤一色");
            }
            // 4. 戻りフラグが渡されるかどうかをチェックするために戻ります。
        }
 
        // 生年月日を確認する function checkBirthday() {
            // 1. 生年月日を取得します。 var birthday = $("#birthday").val();
            // 2. 空でないか確認し、検証に合格したかどうかを返します if (typeof birthday == "undefined" || birthday == null || birthday == "") {
                $("#name").css("border", "1px の赤一色");
                false を返します。
            } それ以外 {
                $("#name").css("境界線", "");
                true を返します。
            }
        }
 
        // $(function () {をチェック
            //フォームが送信されると、すべての検証メソッドが呼び出されます $("#registerForm").submit(function () {
                // このメソッドが戻り値を持たないか、true を返す場合、フォームは送信されます。false を返す場合、フォームは送信されません。 // 1. データをサーバーに送信します if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday()) {
                    // 検証に合格しました。Ajax リクエストを送信し、フォームデータを送信します。ユーザー名 = zhangsan & パスワード = 123
                    $.post("registerServlet", $(this).serialize(), 関数(データ) {
                        if (データ.フラグ) {
                            // 登録が成功しました。成功ページに移動します。alert("登録が成功しました!");
                        } それ以外 {
                            //登録に失敗しました。errorMsg$("#errorMsg").html(data.errorMsg); にプロンプト情報を追加します。
                        }
                    });
                }
                //2. ページジャンプを許可しない。false を返す。
            });
            // コンポーネントがフォーカスを失うと、対応するチェック メソッドを呼び出します $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);
            $("#name").blur(checkName);
            $("#telephone").blur(チェック電話番号);
            $("#birthday").blur(checkBirthday);
        })
    </スクリプト>
</head>
<本文>
<div>
    <p>ユーザー登録</p>
    <!--登録フォーム-->
    <div id="errorMsg" style="color:red;text-align: center"></div>
    <フォーム id="registerForm" アクション="registerServlet" メソッド="post">
        <テーブルスタイル="margin-top: 25px;">
            <tr>
                <td class="td_left">
                    <label for="username">ユーザー名</label>
                </td>
                <td class="td_right">
                    <input type="text" id="username" name="username" placeholder="アカウント番号を入力してください">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="password">パスワード</label>
                </td>
                <td class="td_right">
                    <input type="text" id="password" name="password" placeholder="パスワードを入力してください">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="email">メール</label>
                </td>
                <td class="td_right">
                    <input type="text" id="email" name="email" placeholder="メールアドレスを入力してください">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="name">名前</label>
                </td>
                <td class="td_right">
                    <input type="text" id="name" name="name" placeholder="本名を入力してください">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="telephone">携帯電話番号</label>
                </td>
                <td class="td_right">
                    <input type="text" id="telephone" name="telephone" placeholder="電話番号を入力してください">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="sex">性別</label>
                </td>
                <td class="td_right 性別">
                    <input type="radio" id="sex" name="sex" value="Male" チェック済み> 男性<input type="radio" name="sex" value="Female"> 女性</td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="birthday">生年月日</label>
                </td>
                <td class="td_right">
                    <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                </td>
                <td class="td_right チェック">
                    <input type="submit" class="submit" value="登録">
                    <span id="msg" style="color: red;"></span>
                </td>
            </tr>
        </テーブル>
    </フォーム>
</div>
</本文>
<スクリプト>
 
</スクリプト>
</html>

バックグラウンド処理コードを見る必要はありません。フロントエンドとバックエンドがやり取りするためにのみ必要です。RegisterServlet.java

パッケージ com.demo.servlet;
 
javax.servlet.ServletException をインポートします。
javax.servlet.annotation.WebServlet をインポートします。
javax.servlet.http.HttpServlet をインポートします。
javax.servlet.http.HttpServletRequest をインポートします。
javax.servlet.http.HttpServletResponse をインポートします。
java.io.IOException をインポートします。
java.util.Iterator をインポートします。
java.util.Map をインポートします。
java.util.Set をインポートします。
 
@WebServlet("/registerServlet")
パブリッククラスRegisterServletはHttpServletを拡張します。
    @オーバーライド
    保護された void doGet(HttpServletRequest req, HttpServletResponse resp) は ServletException、IOException をスローします {
        Map<String, String[]> パラメータマップ = req.getParameterMap();
        <文字列> keySet を設定します。
        イテレータ<String> iterator = keySet.iterator();
        (イテレータ.hasNext()) の間 {
            文字列キー = iterator.next();
            System.out.println(キー + ":" + パラメータマップ.get(キー)[0]);
        }
// 文字列 str="{flag:true,errorMsg:'登録に失敗しました'}";// エラーの例 文字列 str="{\"flag\":\"true\",\"errorMsg\":\"登録に失敗しました\"}";
        レスポンス：コンテンツタイプを「application/json;charset=utf-8」に設定します。
        resp.getWriter().print(str);
    }
 
    @オーバーライド
    保護された void doPost(HttpServletRequest req, HttpServletResponse resp) は ServletException、IOException をスローします {
        this.doGet(要求、応答);
    }
}

効果：