Validazione dei moduli JavaScript

La verifica dei moduli HTML può essere eseguita tramite JavaScript.

I moduli HTML sono solitamente utilizzati per raccogliere informazioni degli utenti, come nome, indirizzo email, posizione, età, ecc.

Ma è probabile che alcuni utenti non inseriscano i dati che ti aspetti.

Per evitare di sovraccaricare le risorse del server, puoi utilizzare JavaScript per verificare i dati del modulo sul client (sistema utente)

Eseguita dal browser web prima di inviare l'input al server webVerifica sul lato del client.

Dopo aver inviato l'input al serverVerifica sul lato del serverEseguito dal server web.

　　<div class="wrapper">
　　　　<h2>Crea un account</h2>
　　　　<label for="username"><b>Nome</b></label>
　　　　<input type="text" placeholder="Inserisci il nome utente" name="uname" id="username" required>
　　　　<label for="useremail"><b>Email</b></label>
　　　　<input type="email" placeholder="Inserisci Email" name="uemail" id="useremail" required>
　　　　<label for="userpwd1"><b>Password</b></label>
　　　　<input type="password" placeholder="Inserisci la password" name="psw" id="userpwd1" required>
　　　　<input type="password" placeholder="Conferma la password" name="cpsw" id="userpwd2" required>
　　　　<p style="margin-top: 10px;">
　　　　　　　<input type="radio" name="gender" id="female" value="female" checked><label for="female">Donna</label>
　　　　　　　<input type="radio" name="gender" id="male" value="male"><label for="male">Uomo</label>
　　　　</p>
　　　　<button type="submit">Registrati</button>
　　</div>
　　<div class="footer">
　　　　<div>Già hai un account? <a href="#">Accedi</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("Il nome deve essere compilato");
　　　　return false;
　　}
　　if (email == "") {
　　　　alert("Deve compilare l'email");
　　　　return false;
　　}
　　if (pswd1 !== "" || pswd2 !== "") {
　　　　if (pswd1 !== pswd2) {
　　　　　　alert("La password non corrisponde");
　　　　　　return false;　　　　　　
　　　　}
　　}
　　　　alert("La password deve essere compilata");
　　　　return false;　　
　　}
　　return true;
}
</script>

Compiti di validazione tipici includono:

• Ha compilato tutti i campi obbligatori?

• Ha inserito dati validi?

In questo codice, se il campo di input (nome utente) è vuoto, questa funzione mostrerà un messaggio di avviso e tornerà false per prevenire la presentazione del modulo:

　　function validateForm() {
　　let x = document.getElementById("uname").value;
　　if (x == "") {
　　　　alert("Il nome deve essere compilato");
　　　　return false;
　　}
　　}

Si può chiamare questa funzione durante la presentazione del modulo:

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

Validazione dell'inserimento numerico

JavaScript viene solitamente utilizzato per validare l'inserimento numerico.

Inserisci un numero tra 1 e 10:

Validazione dell'inserimento email

JavaScript viene solitamente utilizzato per validare gli indirizzi email.

Inserisci un indirizzo email valido:

Validazione della conferma della password

JavaScript viene solitamente utilizzato per abbinare la conferma della password.

Validazione automatica dei moduli HTML

La validazione dei moduli HTML può essere utilizzataObbligatorioEsecuzione automatica delle proprietà:

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

Modifica del tipo di input

Puoi passare da<input type="password">a<input type="text">usando JavaScript.

Inserisci un valore nel campo password e poi clicca sul pulsante 'Mostra password':

Attributi di validazione dell'input HTML

HTML5 ha introdotto i seguenti nuovi attributi HTML:

Selettore pseudo di validazione CSS

CSS3 ha introdotto i seguenti nuovi selettori pseudo-CSS:

Attenzione:La convalida client non può sostituire o sostituire la convalida server-side. Anche se i dati del modulo sono stati verificati dall'utente, i dati del modulo devono sempre essere verificati sul server-side, perché l'utente può disabilitare JavaScript nel proprio browser.