jQuery implementiert die Formularvalidierung

Verwenden Sie jQuery, um die Formularvalidierung zu implementieren. Zu Ihrer Information: Die spezifischen Inhalte lauten wie folgt

registrieren.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Registrieren</title>
    <!--jQuery importieren-->
    <script src="js/jquery-3.3.1.js"></script>
    <!--Formularvalidierung durchführen-->
    <Skript>
        /*
    Formularvalidierung:
     1. Benutzername: ein einzelnes Wort, Länge 8 bis 20 Zeichen 2. Passwort: ein einzelnes Wort, Länge 8 bis 20 Zeichen 3. E-Mail: E-Mail-Format 4. Name: darf nicht leer sein 5. Handynummer: Handynummernformat 6. Geburtsdatum: darf nicht leer sein*/
 
        // Benutzernamen prüfen // Wortzeichen, Länge 8 bis 20 Zeichen function checkUsername() {
            // 1. Holen Sie sich den Benutzernamenwert var username = $("#username").val();
            // 2. Definieren Sie den regulären Validierungsausdruck var reg_username = /^\w{8,20}$/;
            // 3. Bestimmen Sie, ob die Überprüfungsanforderungen erfüllt sind, und geben Sie eine Eingabeaufforderung aus. var flag = reg_username.test(username);
            wenn (Flagge) {
                // Gültiger Benutzername$("#username").css("border", "");
            } anders {
                // Benutzername ist ungültig, fügen Sie einen roten Rand hinzu $("#username").css("border", "1px solid red");
            }
            // 4. Gibt zurück, ob die Überprüfung erfolgreich war. Return Flag;
        }
 
        // Passwort überprüfen Funktion checkPassword() {
            //1. Holen Sie sich den Kennwortwert var password = $("#password").val();
            //2. Definieren Sie den regulären Ausdruck var reg_password = /^\w{8,20}$/;
            //3. Beurteilen und umgehend Informationen geben var flag = reg_password.test(password);
            wenn (Flagge) {
                //Das Passwort ist gültig$("#password").css("border", "");
            } anders {
                //Das Passwort ist ungültig, fügen Sie einen roten Rand hinzu $("#password").css("border", "1px solid red");
            }
            // 4. Kehren Sie zurück, um zu prüfen, ob das Return-Flag übergeben wird.
        }
 
        // E-Mail prüfen Funktion checkEmail() {
            //1. Postfach abrufen var email = $("#email").val();
            //2. Definieren Sie den regulären [email protected]
            var reg_email = /^\w+@\w+\.\w+$/;
            //3. Richter var flag = reg_email.test(email);
            wenn (Flagge) {
                $("#email").css("border", "");
            } anders {
                $("#email").css("border", "1px durchgehend rot");
            }
            // 4. Kehren Sie zurück, um zu prüfen, ob das Return-Flag übergeben wird.
        }
 
        // Namen prüfen Funktion checkName() {
            // 1. Den Namen abrufen var name = $("#name").val();
            // 2. Überprüfe, ob es nicht leer ist und gib zurück, ob die Prüfung erfolgreich war, if (typeof name == "undefined" || name == null || name == "") {
                $("#name").css("border", "1px durchgehend rot");
                gibt false zurück;
            } anders {
                $("#name").css("border", "");
                gibt true zurück;
            }
        }
 
        // Rufnummer prüfen Funktion checkTelephone() {
            // 1. Holen Sie sich die Telefonnummer var telephone = $("#telephone").val();
            // 2. Definieren Sie den regulären Ausdruck var reg_tel = /^1(3|4|5|6|7|8|9)\d{9}$/;
            // 3. Beurteilen Sie var flag = reg_tel.test(Telefon);
            wenn (Flagge) {
                $("#Telefon").css("Rand", "");
            } anders {
                $("#Telefon").css("Bord", "1px durchgehend rot");
            }
            // 4. Kehren Sie zurück, um zu prüfen, ob das Return-Flag übergeben wird.
        }
 
        // Geburtsdatum prüfen Funktion checkBirthday() {
            // 1. Holen Sie sich das Geburtsdatum var birthday = $("#birthday").val();
            // 2. Überprüfen Sie, ob es nicht leer ist, und geben Sie zurück, ob die Überprüfung erfolgreich war, wenn (Typ von Geburtstag == "undefined" || Geburtstag == null || Geburtstag == "") {
                $("#name").css("border", "1px durchgehend rot");
                gibt false zurück;
            } anders {
                $("#name").css("border", "");
                gibt true zurück;
            }
        }
 
        // Prüfe $(function () {
            //Wenn das Formular übermittelt wird, werden alle Validierungsmethoden aufgerufen $("#registerForm").submit(function () {
                // Wenn diese Methode keinen Rückgabewert hat oder true zurückgibt, wird das Formular abgeschickt. Wenn sie false zurückgibt, wird das Formular nicht abgeschickt. // 1. Daten an den Server senden if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday()) {
                    // Überprüfung erfolgreich, Ajax-Anfrage senden, Formulardaten übermitteln username=zhangsan&password=123
                    $.post("registerServlet", $(this).serialize(), Funktion (Daten) {
                        wenn (Daten.Flag) {
                            // Registrierung erfolgreich, springe zur Erfolgsseite alert("Registrierung erfolgreich!");
                        } anders {
                            //Registrierung fehlgeschlagen, fügen Sie der Fehlermeldung $("#errorMsg").html(data.errorMsg) eine Eingabeaufforderung hinzu.
                        }
                    });
                }
                //2. Erlaube keine Seitensprünge return false;
            });
            //Wenn eine Komponente den Fokus verliert, rufen Sie die entsprechende Prüfmethode auf $("#username").blur(checkUsername);
            $("#passwort").blur(checkPassword);
            $("#email").unschärfe(checkEmail);
            $("#name").blur(checkName);
            $("#Telefon").blur(checkTelephone);
            $("#Geburtstag").blur(checkBirthday);
        })
    </Skript>
</Kopf>
<Text>
<div>
    <p>Benutzerregistrierung</p>
    <!--Anmeldeformular-->
    <div id="errorMsg" style="color:red;text-align: center"></div>
    <form id="registerForm" action="registerServlet" method="post">
        <table style="margin-top: 25px;">
            <tr>
                <td Klasse="td_left">
                    <label for="username">Benutzername</label>
                </td>
                <td Klasse="td_right">
                    <input type="text" id="username" name="username" placeholder="Bitte geben Sie Ihre Kontonummer ein">
                </td>
            </tr>
            <tr>
                <td Klasse="td_left">
                    <label for="password">Passwort</label>
                </td>
                <td Klasse="td_right">
                    <input type="text" id="password" name="password" placeholder="Bitte geben Sie Ihr Passwort ein">
                </td>
            </tr>
            <tr>
                <td Klasse="td_left">
                    <label for="email">E-Mail</label>
                </td>
                <td Klasse="td_right">
                    <input type="text" id="email" name="email" placeholder="Bitte geben Sie Ihre E-Mail-Adresse ein">
                </td>
            </tr>
            <tr>
                <td Klasse="td_left">
                    <label für="name">Name</label>
                </td>
                <td Klasse="td_right">
                    <input type="text" id="name" name="name" placeholder="Bitte geben Sie Ihren richtigen Namen ein">
                </td>
            </tr>
            <tr>
                <td Klasse="td_left">
                    <label for="telephone">Mobiltelefonnummer</label>
                </td>
                <td Klasse="td_right">
                    <input type="text" id="telephone" name="telephone" placeholder="Bitte geben Sie Ihre Telefonnummer ein">
                </td>
            </tr>
            <tr>
                <td Klasse="td_left">
                    <label for="sex">Geschlecht</label>
                </td>
                <td Klasse="td_richtiges Geschlecht">
                    <input type="radio" id="sex" name="sex" value="Männlich" aktiviert> Männlich<input type="radio" name="sex" value="Weiblich"> Weiblich</td>
            </tr>
            <tr>
                <td Klasse="td_left">
                    <label for="birthday">Geburtsdatum</label>
                </td>
                <td Klasse="td_right">
                    <input type="date" id="birthday" name="birthday" placeholder="Jahr/Monat/Tag">
                </td>
            </tr>
            <tr>
                <td Klasse="td_left">
                </td>
                <td class="td_right prüfen">
                    <input type="submit" class="submit" value="Registrieren">
                    <span id="msg" style="Farbe: rot;"></span>
                </td>
            </tr>
        </Tabelle>
    </form>
</div>
</body>
<Skript>
 
</Skript>
</html>

Sie müssen sich den Hintergrundverarbeitungscode nicht ansehen. Er wird nur für die Interaktion zwischen Front- und Backend benötigt: RegisterServlet.java

Paket com.demo.servlet;
 
importiere javax.servlet.ServletException;
importiere javax.servlet.annotation.WebServlet;
importiere javax.servlet.http.HttpServlet;
importiere javax.servlet.http.HttpServletRequest;
importiere javax.servlet.http.HttpServletResponse;
importiere java.io.IOException;
importiere java.util.Iterator;
importiere java.util.Map;
importiere java.util.Set;
 
@WebServlet("/registerServlet")
öffentliche Klasse RegisterServlet erweitert HttpServlet {
    @Überschreiben
    geschützt void doGet(HttpServletRequest req, HttpServletResponse resp) wirft ServletException, IOException {
        Map<String, String[]> parameterMap = req.getParameterMap();
        Set<String> keySet = parameterMap.keySet();
        Iterator<String> iterator = Schlüsselsatz.iterator();
        während (Iterator.hasNext()) {
            Zeichenfolgenschlüssel = Iterator.next();
            System.out.println(Schlüssel + ":" + parameterMap.get(Schlüssel)[0]);
        }
// String str="{flag:true,errorMsg:'Registrierung fehlgeschlagen'}";// Fehlerbeispiel String str="{\"flag\":\"true\",\"errorMsg\":\"Registrierung fehlgeschlagen\"}";
        bzw. setContentType("application/json;charset=utf-8");
        bzw. getWriter().print(str);
    }
 
    @Überschreiben
    geschützt void doPost(HttpServletRequest req, HttpServletResponse resp) wirft ServletException, IOException {
        dies.doGet(req, resp);
    }
}

Wirkung:

Codeadresse für diesen Abschnitt: Demo

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Erste Schritte mit der grundlegenden Verwendung der Formularvalidierung von jquery validate.js
Implementieren einer Formularvalidierung basierend auf Bootstrap+jQuery.validate
jQuery-Formularvalidierung mit dem Plugin formValidator
Implementierungscode für die JQuery-Übungsformularvalidierung
Verwenden von jQuery zur Implementierung der Formularvalidierung
Implementierung einer Formularvalidierung basierend auf JQuery
Das jQuery-Formularvalidierungs-Plugin formValidation implementiert personalisierte Fehleraufforderungen
jQuery implementiert die Formularvalidierung und verhindert illegale Übermittlungen
JQuery-Plugin EasyUI-Formularvalidierungsübermittlung (Beispielcode)
jQuery implementiert ein Formularvalidierungsbeispiel für die Benutzerregistrierung

<<: Mehrere Möglichkeiten zum Speichern von Bildern in einer MySQL-Datenbank

>>: Detaillierte Erläuterung zum Einrichten des Ressourcencaches in Nginx