Validation du formulaire JavaScript

La validation des formulaires HTML peut être effectuée à l'aide de JavaScript.

Les formulaires HTML sont généralement utilisés pour collecter des informations utilisateur, telles que le nom, l'adresse e-mail, la localisation, l'âge, etc.

Mais il est probable que certains utilisateurs ne saisissent pas les données que vous attendez.

Pour éviter de surcharger les ressources du serveur, vous pouvez utiliser JavaScript pour valider les données du formulaire sur le client (système utilisateur).

在将输入发送到Web服务器之前，由Web浏览器执行客户端验证。

输入已发送到服务器后，服务器端验证由Web服务器执行。

　　<div class="wrapper">
　　　　<h2>Create an account/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>/button>
　　</div>
　　<div class="footer">
　　　　<div>已有一个账户? <a href="#">登录</a>/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("Le nom doit être rempli");
　　　　return false;
　　}
　　if(email == "") {
　　　　alert("Il est obligatoire de remplir l'e-mail");
　　　　return false;
　　}
　　if(pswd1　!== "" || pswd2　!== "") {
　　　　if(pswd1　!== pswd2) {
　　　　　　alert("Password didn't match");
　　　　　　return false;　　　　　　
　　　　}
　　} else {
　　　　alert("Le mot de passe doit être rempli");
　　　　return false;　　
　　}
　　return true;
}
</script>

Les tâches de validation typiques incluent :

• L'utilisateur a-t-il rempli tous les champs obligatoires ?

• Les données saisies par l'utilisateur sont-elles valides ?

Dans ce code, si le champ d'entrée (nom d'utilisateur) est vide, cette fonction affichera un message d'alerte et retournera false pour empêcher le soumission du formulaire :

　　function validateForm() {
　　let x = document.getElementById("uname").value;
　　if (x == "") {
　　　　alert("Le nom doit être rempli");
　　　　return false;
　　}
　　}

La fonction peut être appelée lors de la soumission du formulaire :

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

Validation des entrées numériques

JavaScript est généralement utilisé pour valider les entrées numériques.

Veuillez saisir1à10entre les nombres :

Validation de l'entrée e-mail

JavaScript est généralement utilisé pour valider l'adresse e-mail.

Veuillez saisir une adresse e-mail valide :

Validation de la confirmation du mot de passe

JavaScript est généralement utilisé pour correspondre à la confirmation du mot de passe.

Validation automatique HTML des formulaires

La validation HTML des formulaires peut être utiliséeObligatoireExécution automatique des propriétés :

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

Changement de type d'entrée

Vous pouvez utiliser javascript pour passer de<input type="password">à<input type="text">.

Saisissez une valeur dans le champ de mot de passe, puis cliquez sur le bouton 'Afficher le mot de passe' :

Attributs de validation des entrées HTML

HTML5Les nouveaux attributs HTML sont introduits :

Sélecteurs CSS pseudo de validation

CSS3Les nouveaux sélecteurs CSS pseudo sont introduits :

Attention :La validation client ne peut pas remplacer ou remplacer la validation serveur. Même si les données du formulaire ont été vérifiées par l'utilisateur, les données du formulaire doivent toujours être vérifiées sur le serveur, car l'utilisateur peut désactiver JavaScript dans son navigateur.