Validation du formulaire JavaScript

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 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)

La fonction suivante permet de vérifier si l'utilisateur a rempli les champs obligatoires (ou obligatoires) sous la forme Sélectionner) projet. 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) :

function validateForm()
{
	var x=document.forms["myForm"]["fname"].value;
	if (x==null || x=="")
	{
		alert("姓必须填写");
		return false;
	}
}

La fonction ci-dessus est sous la forme Appelée lorsque le formulaire est soumis :

Instance

<!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="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
	
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Validation par e-mail

La fonction suivante vérifie si les données saisies sont conformes à la syntaxe de base d'un adresse email.

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 @ :

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;
	}
}

Voici le code complet avec le formulaire HTML :

Exemple

<!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="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	
</body>
</html>