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:
|
<<: Mehrere Möglichkeiten zum Speichern von Bildern in einer MySQL-Datenbank
>>: Detaillierte Erläuterung zum Einrichten des Ressourcencaches in Nginx
Artikel empfehlen
Anweisungen zur Verwendung des Meta-Viewport-Tags (Zoom-Steuerung beim mobilen Surfen)
Wenn OP eine Webseite mit der aktuellen Firmware ...
Übertragung von Routing-Parametern für die Kommunikation von React-Komponenten (react-router-dom)
Inhaltsverzeichnis Ich habe vor Kurzem React gele...
Verwenden von Vue3 (Teil 1) Erstellen eines Vue CLI-Projekts
Inhaltsverzeichnis 1. Offizielle Dokumentation 2....
JS realisiert Video-Sperreffekt
Verwenden Sie um dies zu erreichen, die modulare ...
Vue implementiert Klicks und übergibt gleichzeitig Ereignisobjekte und benutzerdefinierte Parameter.
Übergeben Sie einfach benutzerdefinierte Paramete...
Lösung für das Problem, dass die Seite leer ist, wenn die Seite mit der Quelldatei in IE7 geöffnet wird
Frage: Die Kodierung meines Blogs ist UTF-8. Manch...
Detaillierte Einführung und Verwendungsbeispiele für Map-Tag-Parameter
Karten-Tags müssen paarweise vorkommen, d. h. <...
Tiefgreifendes Verständnis der verschiedenen Sperren von MySQL
Inhaltsverzeichnis Schlossübersicht Sperrklassifi...
Erläuterung des Prozesses des Docker-Packaging-Node-Projekts
Als Backend-Programmierer muss ich manchmal an Fr...
Beispiel für einen WeChat-Applet-Rechner
Beispiel für einen WeChat-Applet-Rechner. Zu Ihre...
Detaillierte Erläuterung der Gründe und Lösungen für schwebende Elemente, die die Höhe ihrer übergeordneten Elemente reduzieren
Schwebende Elemente führen dazu, dass ihre überge...
Foreman Ubuntu16 Schnellinstallation
Kurzanleitung Das Foreman-Installationsprogramm i...
Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird
VMware-Workstations starten den virtuellen Maschi...
Nginx-Praxis zur Optimierung hoher Parallelität
1. Notwendigkeit des Tunings Ich habe mich immer ...
Detaillierte Erläuterung der Gründe und Lösungen für den Fehler beim normalen Start von Docker
1. Abnormale Leistung beim Docker-Start: 1. Der S...