jQuery implementiert die Formularvalidierung

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

Artikel empfehlen

6 praktische Tipps für die TypeScript-Entwicklung

Inhaltsverzeichnis 1. Bestimmen Sie den Entitätst...

Analyse der Situation, in der js die Unterstützung von CSS-Attributen (Werten) bestimmt und informiert

Wenn wir eine neue CSS-Funktion verwenden möchten...

Installieren Sie Ubuntu 18 ohne USB-Laufwerk unter Windows 10 mit EasyUEFI

1. BIOS überprüfen Überprüfen Sie zunächst, in we...

Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters

Keepalived+Nginx+Tomcat zur Erzielung eines hochv...

jQuery-Plugin zur Implementierung eines gestapelten Menüs

Jeden Tag ein jQuery-Plugin - gestapeltes Menü. Z...

MySQL-Batch löschen großer Datenmengen

MySQL-Batch löschen großer Datenmengen Angenommen...

So berechnen Sie den Wert von ken_len im MySQL-Abfrageplan

Die Bedeutung von key_len In MySQL können Sie „ex...

Fügen Sie beim Schreiben von HTML-Links immer Schrägstriche zu Unterordnern hinzu, um HTTP-Anfragen zu reduzieren

Denn wenn am Ende des Unterordners kein Schrägstri...

Lösung für das Problem ungültiger Breiteneinstellungen für Label und Span

Standardmäßig ist die Einstellung der Breite für B...

Beispiel für die Konvertierung von Spark RDD in einen Dataframe und das Schreiben in MySQL

Dataframe ist eine neue API, die in Spark 1.3.0 e...

Detailliertes Tutorial zur Tomcat-Installation und -Bereitstellung in Windows 10

Inhaltsverzeichnis 1 Konfiguration der Java-Umgeb...

Beispielanalyse des Seitenaufteilungsprinzips des MySQL-Clusterindex

Dieser Artikel veranschaulicht anhand eines Beisp...

So führen Sie den Top-Befehl im Batchmodus aus

Der Befehl „top“ ist der beste Befehl, den jeder ...

So handhaben Sie Bilder in Vue-Formularen

Frage: Ich habe in Vue ein Formular zum Hochladen...

Detaillierte Erläuterung der kombinierten MySQL-Abfrage

Verwenden von UNION Die meisten SQL-Abfragen best...