Formularvalidierung in JavaScript

HTML-Formularvalidierung kann mit JavaScript durchgeführt werden.

HTML-Formulare werden in der Regel verwendet, um Benutzerinformationen wie Namen, E-Mail-Adresse, Standort, Alter usw. zu sammeln.

Es ist aber sehr wahrscheinlich, dass einige Benutzer nicht die von Ihnen erwarteten Daten eingeben werden.

Um unnötigen Druck auf die Serverressourcen zu vermeiden, können Sie JavaScript verwenden, um Formulardaten auf dem Client (dem Benutzerssystem) zu validieren.

wird vor dem Senden der Eingaben an den Webserver durch den Webbrowser ausgeführt.Clientseitige Validierung。

Nachdem die Eingaben an den Server gesendet wurden,Serverseitige Validierungdurch den Webserver ausgeführt.

　　<div class="wrapper">
　　　　<h2>Erstellen Sie ein Konto</h2>
　　　　<label for="username"><b>姓名</b></label>
　　　　<input type="text" placeholder="输入用户名" name="uname" id="username" required>
　　　　<label for="useremail"><b>Email</b></label>
　　　　<input type="email" placeholder="输入Email" name="uemail" id="useremail" required>
　　　　<label for="userpwd1><b>Password</b></label>
　　　　<input type="password" placeholder="输入密码" name="psw" id="userpwd1required>
　　　　<input type="password" placeholder="确认密码" name="cpsw" id="userpwd2required>
　　　　<p style="margin-top:　10px;">
　　　　　　　<input type="radio" name="gender" id="female" value="female" checked><label for="female">女</label>
　　　　　　　<input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
　　　　</p>
　　　　<button type="submit">注册</button>
　　</div>
　　<div class="footer">
　　　　<div>已经有一个帐户?　<a　href="#">登录</a></div>
　　</div>
</form>
<script>
function validateForm() {
　　let name = document.getElementById("username").value;
　　let email = document.getElementById("useremail").value;
　　let pswd1　= document.getElementById("userpwd1").value;
　　let pswd2　= document.getElementById("userpwd2").value;
　　
　　if(name == "") {
　　　　alert("Name must be filled out");
　　　　return false;
　　}
　　if(email == "") {
　　　　alert("Eine E-Mail muss ausgefüllt werden");
　　　　return false;
　　}
　　if(pswd1　!== "" || pswd2　!== "") {
　　　　if(pswd1　!== pswd2) {
　　　　　　alert("Password didn' t.match(");
　　　　　　return false;　　　　　　
　　　　}
　　} else {
　　　　alert("Das Passwort muss ausgefüllt werden");
　　　　return false;　　
　　}
　　return true;
}
</script>

Typische Validierungsaufgaben sind:

• Haben die Benutzer alle Pflichtfelder ausgefüllt?

• Haben die Benutzer gültige Daten eingegeben?

In diesem Code wird eine Warnmeldung angezeigt und die Funktion gibt false zurück, um den Formularversand zu verhindern, wenn das Eingabefeld (Benutzername) leer ist:

　　function validateForm() {
　　let x = document.getElementById("uname").value;
　　if (x == "") {
　　　　alert("Der Name muss ausgefüllt werden");
　　　　return false;
　　}
　　}

Diese Funktion kann aufgerufen werden, wenn das Formular eingereicht wird:

<form action="form-action.html" onsubmit="return validateForm()" method="POST">
　　<label for="uname">Name:</label>
　　<input type="text" name="username" id="uname">
　　<input type="submit" value="Submit">
</form>

Numerische Eingabe validieren

JavaScript wird in der Regel verwendet, um numerische Eingaben zu validieren.

Bitte geben Sie ein:1bis10zwischen den Zahlen:

E-Mail-Eingabe validieren

JavaScript wird in der Regel verwendet, um E-Mail-Adressen zu validieren.

Bitte geben Sie eine gültige E-Mail-Adresse ein:

Passwortbestätigung validieren

JavaScript wird in der Regel verwendet, um Passwortbestätigungen abzugleichen.

Automatische HTML-Formularvalidierung

HTML-Formularvalidierung kann verwendet werdenPflichtfeldAutomatische Ausführung der Eigenschaft:

<input type="text" name="demo" required>

Ändern Sie den Eingabetyp

Sie können mit JavaScript zwischen <input type="password"> und <input type="text"> umschalten.

Geben Sie einen Wert im Passwortfeld ein und klicken Sie dann auf die Schaltfläche "Passwort anzeigen":

HTML Eingabevalidierungsattribute

HTML5Es wurden folgende neue HTML-Attribute eingeführt:

CSS Validierungs-Pseudo-Selektoren

CSS3Es wurden folgende neue CSS-Pseudo-Selektoren eingeführt:

Hinweis:Klientenseitige Validierung kann nicht anstelle oder anstelle der Serverseitigen Validierung ersetzen. Selbst wenn die Benutzer die Formulardaten bereits validiert haben, sollten die Formulardaten immer auf dem Server validiert werden, da Benutzer JavaScript in ihrem Browser deaktivieren können.