Validation du formulaire JavaScript
Validation du formulaire JavaScript
JavaScript disponible pour valider les données saisies dans le formulaire HTML avant que les données ne soient envoyées au serveur.
Les données du formulaire nécessitent souvent JavaScript pour vérifier leur exactitude :
Vérifier si les données du formulaire sont vides ?
Vérifier que l'adresse e-mail saisie est correcte ?
Vérifier que la date est correctement saisie ?
Vérifier si le contenu de saisie du formulaire est numérique ?
Éléments requis (ou requis)
La fonction suivante permet de vérifier si l'utilisateur a rempli les éléments requis (ou obligatoires) dans le formulaire. Si le champ obligatoire ou le champ obligatoire est vide, la boîte d'avertissement apparaîtra et la valeur de retour de la fonction est fausse. Sinon, la valeur de retour de la fonction est vraie (ce qui signifie qu'il n'y a pas de problème avec les données) :
.
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert ("Le nom de famille doit être renseigné");
return false;
}
}
La fonction ci-dessus est appelée lorsque le formulaire est soumis :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("姓必须填写");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>Validation de l'e-mail
La fonction suivante vérifie si les données saisies sont conformes à la syntaxe de base d'une adresse e-mail.
Cela signifie que les données d'entrée doivent contenir le symbole @ et le point (.). En même temps, @ ne peut pas être le premier caractère de l'adresse email, et il doit y avoir au moins un point après @ :
function validateForm(){
var x=document.forms["myForm "]["email "].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("Adresse e-mail non valide");
return false;
}
>
Voici le code complet ainsi que le formulaire HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("不是一个有效的 e-mail 地址");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
section suivante