jQuery implementiert die Registrierungsseite zur Mitarbeiterverwaltung

<Text>
    <div Klasse="Container">
        <h2 class="text-center">Benutzerregistrierung</h2>
        <form action="Baidu.html" method="post" class="form-horizontal">
            <div Klasse="Formulargruppe">
                <label for="username" class="col-md-2 col-md-offset-3 control-label">Benutzername<b>*</b></label>
                <div Klasse="col-md-3">
                    <input id="username" type="text" placeholder="4-10 englische Buchstaben oder Zahlen" class="form-control">
                </div>
                <div Klasse="col-md-4">
                    <label id="Fehlername" class="control-label errstyle"></label>
                </div>
            </div>
            <div Klasse="Formulargruppe">
                <label for="password" class="col-md-2 col-md-offset-3 control-label">Passwort<b>*</b></label>
                <div Klasse="col-md-3">
                    <input id="password" type="password" placeholder="8-16 englische Buchstaben oder Zahlen" class="form-control">
                </div>
                <div Klasse="col-md-4">
                    <label id="Fehlerpasswort" class="control-label errstyle"></label>
                </div>
            </div>
            <div Klasse="Formulargruppe">
                <label for="confirm" class="col-md-2 col-md-offset-3 control-label">Passwort bestätigen<b>*</b></label>
                <div Klasse="col-md-3">
                    <input id="confirm" type="password" placeholder="Passwort bestätigen" class="form-control">
                </div>
                <div Klasse="col-md-4">
                    <label id="Fehlerbestätigung" class="control-label errstyle"></label>
                </div>
            </div>
            <div Klasse="Formulargruppe">
                <label for="Abteilung" class="col-md-2 col-md-offset-3 control-label">Abteilung</label>
                <div Klasse="col-md-3">
                    <select id="Abteilung" class="Formularsteuerung">
                        <option>Verkaufsabteilung</option>
                        <option>Technische Abteilung</option>
                        <option>Personalabteilung</option>
                    </Auswählen>
                </div>
            </div>
            <div Klasse="Formulargruppe">
                <label class="col-md-2 col-md-offset-3 control-label">Geschlecht</label>
                <div Klasse="col-md-3 Radio">
                    <label><input name="gender" type="radio" value="1" checked>Männlich</label>
                    <label><input name="gender" type="radio" value="0">Weiblich</label>
                </div>
            </div>
            <div Klasse="Formulargruppe">
                <label class="col-md-2 col-md-offset-3 control-label">Hobbys</label>
                <div class="col-md-3 checkbox" id="hobbies">
                    <label><input type="checkbox" value="1" id="xq">Schach spielen</label>
                    <label><input type="checkbox" value="2" id="yy">Schwimmen</label>
                    <label><input type="checkbox" value="3" id="ps">Bergsteigen</label>
                    <label><input type="checkbox" value="4" id="dq">Ball spielen</label>
                </div>
                <div Klasse="col-md-4">
                    <label id="Fehlerhobbies" class="control-label errstyle"></label>
                </div>
            </div>
            <div Klasse="Formulargruppe">
                <label for="email" class="col-md-2 col-md-offset-3 control-label">E-Mail</label>
                <div Klasse="col-md-3">
                    <input type="email" id="email" placeholder="E-Mail" class="form-control">
                </div>
                <div Klasse="col-md-4">
                    <label id="erroremail" class="control-label errstyle"></label>
                </div>
            </div>
            <div Klasse="Formulargruppe">
                <label class="col-md-2 col-md-offset-3 control-label">Lebensmotto</label>
                <div Klasse="col-md-3">
                    <textarea class="form-control" rows="3" placeholder="Dieser Typ ist faul und hat nichts übrig gelassen"></textarea>
                </div>
            </div>
            <div Klasse="col-md-2 col-md-offset-5 text-center">
                <button class="btn btn-primary" id="submit">Senden</button>
                <span> </span>
                <button class="btn btn-primary" type="reset">Löschen</button>
            </div>
        </form>
    </div>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist"></script>
</body>

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Registrieren</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="externes nofollow" >
    <Stil>
        .errstyle {
            Farbe: rot;
        }
        B{
            Farbe: rot;
            Schriftstärke: fett;
        }
    </Stil>
    
    <script src=""></script> //Stellen Sie die jQuery-Bibliothek vor<script src=""></script>  
 
    <Skript>
    $(Funktion(){
        var a=false;
        var b=false;
        var c=false;
        var d=false;
        var e=false;
        $("#Benutzername").blur(function(){
            wenn($(this).val().length == 0) {
                $("#errorname").html("Benutzername ist nicht leer");
                a=falsch;
            }
            anders{
                var reg = /^[0-9a-zA-Z]{4,10}$/;
                wenn(!reg.test($(this).val())) {
                    $("#errorname").html("4-10 englische Buchstaben oder Zahlen");
                    a=falsch;
                }
                anders{
                    $("#Fehlername").html("");
                    a=wahr;
                }
            }
        });
 
 
        $("#Passwort").blur(function() {
            wenn($(this).val().length == 0) {
                $("#errorpassword").html("Das Passwort ist nicht leer");
                b=falsch;
            }
            anders{
                var reg = /^[0-9a-zA-Z]{6,15}$/;
                wenn(!reg.test($(this).val())) {
                    $("#errorpassword").html("6-15 englische Buchstaben oder Zahlen");
                    b=falsch;
                }
                anders{
                    $("#errorpassword").html("");
                    b=wahr;
                }
            }
        });
 
 
        $("#bestätigen").unschärfe(Funktion() {
            wenn($(this).val().length == 0) {
                $("#errorconfirm").html("Das Bestätigungspasswort ist nicht leer");
                c=falsch;
            }
            anders {
                wenn($(this).val() != $("#password").val()) {
                    $("#errorconfirm").html("Inkonsistent mit der Passworteingabe");
                    c=falsch;
                }
                anders {
                    $("#errorconfirm").html("");
                    c=wahr;
                }
            }
        });
 
        $("#email").unschärfe(Funktion() {
            if(!$("#xq").ist(":aktiviert") || $("#yy").ist(":aktiviert") || $("#ps").ist(":aktiviert") || $("#dq").ist(":aktiviert")){
                $("#errorhobbies").html("Mindestens ein Hobby");
                e=falsch;
            }
            anders{
                $("#fehlerhobbies").html("");
                e=wahr;
            }
            wenn($(this).val().length == 0) {
                $("#erroremail").html("Die E-Mail-Adresse ist nicht leer");
                d=falsch;
            }
            anders{
                var reg=/^\w+@\w+(.\w+)+$/;
                wenn(!reg.test($(this).val())) {
                    $("#erroremail").html("Fehler im E-Mail-Format");
                    d=falsch;
                }
                anders{
                    $("#erroremail").html("");
                    d=wahr;
                }
            }
        });
 
        $("#senden").klick(function() {
            wenn(a && b && c && d && e){
                $("form").submit();
            }
            anders{
                alert("Einige Informationen sind falsch eingegeben");
                gibt false zurück;
            }
        });
    });
 
 
    </Skript>
</Kopf>