JavaScript peut être utilisé pour valider ces données d'entrée dans les formulaires HTML avant que les données ne soient envoyées au serveur.
Les données du formulaire nécessitent souvent l'utilisation de JavaScript pour vérifier leur exactitude :
Vérifier que les données du formulaire sont vides ?
Vérifier que l'entrée est une adresse e-mail correcte ?
La date de vérification est-elle saisie correctement ?
Vérifier si le contenu de saisie du formulaire est numérique ?
Éléments obligatoires (ou obligatoires)
Fonction suivante Utilisée pour vérifier si l'utilisateur a rempli les éléments requis (ou obligatoires) dans le formulaire. Si requis ou si le champ requis 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) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</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="" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>Exécutez le programme et essayez-le
Validation par 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 e-mail, et il doit y avoir au moins un point après @ :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</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="" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>Exécutez le programme et essayez-le
section suivante