jQuery で従業員管理登録ページを実装する

この記事では、従業員管理登録ページを実装するためのjQueryの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

コードショーケース

HTML ページコード

<本文>
    <div class="コンテナ">
        <h2 class="text-center">ユーザー登録</h2>
        <form action="Baidu.html" method="post" class="form-horizontal">
            <div class="フォームグループ">
                <label for="username" class="col-md-2 col-md-offset-3 control-label">ユーザー名<b>*</b></label>
                <div class="col-md-3">
                    <input id="username" type="text" placeholder="4～10 文字の英語の文字または数字" class="form-control">
                </div>
                <div class="col-md-4">
                    <label id="エラー名" class="コントロールラベル エラースタイル"></label>
                </div>
            </div>
            <div class="フォームグループ">
                <label for="password" class="col-md-2 col-md-offset-3 control-label">パスワード<b>*</b></label>
                <div class="col-md-3">
                    <input id="password" type="password" placeholder="8〜16 文字の英語の文字または数字" class="form-control">
                </div>
                <div class="col-md-4">
                    <label id="errorpassword" class="control-label errstyle"></label>
                </div>
            </div>
            <div class="フォームグループ">
                <label for="confirm" class="col-md-2 col-md-offset-3 control-label">パスワードの確認<b>*</b></label>
                <div class="col-md-3">
                    <input id="confirm" type="password" placeholder="パスワードの確認" class="form-control">
                </div>
                <div class="col-md-4">
                    <label id="errorconfirm" class="control-label errstyle"></label>
                </div>
            </div>
            <div class="フォームグループ">
                <label for="department" class="col-md-2 col-md-offset-3 control-label">部門</label>
                <div class="col-md-3">
                    <select id="部門" class="フォームコントロール">
                        <option>営業部</option>
                        <option>技術部門</option>
                        <option>人事部</option>
                    </選択>
                </div>
            </div>
            <div class="フォームグループ">
                <label class="col-md-2 col-md-offset-3 control-label">性別</label>
                <div class="col-md-3 ラジオ">
                    <label><input name="gender" type="radio" value="1" チェック済み>男性</label>
                    <label><input name="gender" type="radio" value="0">女性</label>
                </div>
            </div>
            <div class="フォームグループ">
                <label class="col-md-2 col-md-offset-3 control-label">趣味</label>
                <div class="col-md-3 チェックボックス" id="趣味">
                    <label><input type="checkbox" value="1" id="xq">チェスをプレイ</label>
                    <label><input type="checkbox" value="2" id="yy">水泳</label>
                    <label><input type="checkbox" value="3" id="ps">登山</label>
                    <label><input type="checkbox" value="4" id="dq">ボールをプレイ</label>
                </div>
                <div class="col-md-4">
                    <label id="errorhobbies" class="control-label errstyle"></label>
                </div>
            </div>
            <div class="フォームグループ">
                <label for="email" class="col-md-2 col-md-offset-3 control-label">メール</label>
                <div class="col-md-3">
                    <input type="email" id="email" placeholder="メール" class="form-control">
                </div>
                <div class="col-md-4">
                    <label id="erroremail" class="control-label errstyle"></label>
                </div>
            </div>
            <div class="フォームグループ">
                <label class="col-md-2 col-md-offset-3 control-label">人生のモットー</label>
                <div class="col-md-3">
                    <textarea class="form-control" rows="3" placeholder="この男は怠け者で何も残さなかった"></textarea>
                </div>
            </div>
            <div class="col-md-2 col-md-offset-5 テキストセンター">
                <button class="btn btn-primary" id="submit">送信</button>
                <span> </span>
                <button class="btn btn-primary" type="reset">クリア</button>
            </div>
        </フォーム>
    </div>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist"></script>
</本文>

jsコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>登録</title>
    <link rel="スタイルシート" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="外部 nofollow" >
    <スタイル>
        .errstyle {
            色: 赤;
        }
        b{
            色: 赤;
            フォントの太さ: 太字;
        }
    </スタイル>
    
    <script src=""></script> //jQuery ライブラリを紹介します<script src=""></script>  
 
    <スクリプト>
    $(関数(){
        var a = false;
        var b = false;
        var c = false;
        var d = false;
        var e = false;
        $("#ユーザー名").blur(関数(){
            $(this).val().length == 0 の場合
                $("#errorname").html("ユーザー名が空ではありません");
                a = 偽;
            }
            それ以外{
                var reg = /^[0-9a-zA-Z]{4,10}$/;
                if(!reg.test($(this).val())) {
                    $("#errorname").html("4〜10 文字の英語の文字または数字");
                    a = 偽;
                }
                それ以外{
                    $("#エラー名").html("");
                    真です。
                }
            }
        });
 
 
        $("#password").blur(関数() {
            $(this).val().length == 0 の場合
                $("#errorpassword").html("パスワードが空ではありません");
                b = 偽;
            }
            それ以外{
                var reg = /^[0-9a-zA-Z]{6,15}$/;
                if(!reg.test($(this).val())) {
                    $("#errorpassword").html("6〜15 文字の英語の文字または数字");
                    b = 偽;
                }
                それ以外{
                    $("#errorpassword").html("");
                    b = 真;
                }
            }
        });
 
 
        $("#confirm").blur(関数() {
            $(this).val().length == 0 の場合
                $("#errorconfirm").html("パスワードが空でないことを確認してください");
                c=偽;
            }
            それ以外 {
                $(this).val() != $("#password").val()) {
                    $("#errorconfirm").html("パスワード入力と一致しません");
                    c=偽;
                }
                それ以外 {
                    $("#errorconfirm").html("");
                    真の場合
                }
            }
        });
 
        $("#email").blur(関数() {
            if(!$("#xq").is(":checked") || $("#yy").is(":checked") || $("#ps").is(":checked") || $("#dq").is(":checked")){
                $("#errorhobbies").html("少なくとも 1 つの趣味");
                e=偽;
            }
            それ以外{
                $("#errorhobbies").html("");
                e = 真;
            }
            $(this).val().length == 0 の場合
                $("#erroremail").html("メールアドレスが空ではありません");
                d=偽;
            }
            それ以外{
                var reg=/^\w+@\w+(.\w+)+$/;
                if(!reg.test($(this).val())) {
                    $("#erroremail").html("メール形式エラー");
                    d=偽;
                }
                それ以外{
                    $("#erroremail").html("");
                    d=真;
                }
            }
        });
 
        $("#submit").click(function() {
            もし(a && b && c && d && e){
                $("フォーム").submit();
            }
            それ以外{
                alert("一部の情報が間違って入力されています");
                false を返します。
            }
        });
    });
 
 
    </スクリプト>
</head>