Maison > Article > interface Web > Explication détaillée de la validation du formulaire dans les connaissances JavaScript_Basic

Explication détaillée de la validation du formulaire dans les connaissances JavaScript_Basic

WBOYoriginal: 2016-05-16 15:54:30958parcourir

La validation du formulaire s'effectue sur le serveur, une fois que le client a saisi toutes les données nécessaires puis appuyé sur le bouton de soumission. Si certaines des données saisies par le client ne sont pas sous la bonne forme ou sont simplement manquantes, le serveur devra renvoyer toutes les données au client et demander que le formulaire soit soumis à nouveau avec les informations correctes. Il s'agit d'un processus long qui augmente la charge sur le serveur.

JavaScript fournit un moyen de valider les données du formulaire sur l'ordinateur du client avant de les envoyer au serveur Web. La validation du formulaire est généralement effectuée de deux manières.

Validation de base - Tout d'abord, le formulaire doit être vérifié pour garantir que la saisie des données est requise pour chacun de ses champs de formulaire. Cela permettra simplement de parcourir chaque champ de la table et de vérifier les données.
Vérification du format des données - Deuxièmement, les données saisies doivent être vérifiées pour le format et les valeurs correctes. Cela nécessitera de mettre en place davantage de logique pour tester l’exactitude des données.

Nous donnerons un exemple pour comprendre le processus de vérification. Ce qui suit est un formulaire simple :

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
 <form action="/cgi-bin/test.cgi" name="myForm" 
     onsubmit="return(validate());">
 <table cellspacing="2" cellpadding="2" border="1">
 <tr>
  <td align="right">Name</td>
  <td><input type="text" name="Name" /></td>
 </tr>
 <tr>
  <td align="right">EMail</td>
  <td><input type="text" name="EMail" /></td>
 </tr>
 <tr>
  <td align="right">Zip Code</td>
  <td><input type="text" name="Zip" /></td>
 </tr>
 <tr>
 <td align="right">Country</td>
 <td>
 <select name="Country">
  <option value="-1" selected>[choose yours]</option>
  <option value="1">USA</option>
  <option value="2">UK</option>
  <option value="3">INDIA</option>
 </select>
 </td>
 </tr>
 <tr>
  <td align="right"></td>
  <td><input type="submit" value="Submit" /></td>
 </tr>
 </table>
 </form>
 </body>
 </html>

Validation du formulaire de base :

Tout d'abord, nous allons vous montrer comment effectuer une validation de formulaire de base. Le tableau ci-dessus nécessite la fonction validate() pour valider les données avant que l'événement onsubmit ne se produise. Voici l'implémentation de la fonction validate() :

<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
 
  if( document.myForm.Name.value == "" )
  {
   alert( "Please provide your name!" );
   document.myForm.Name.focus() ;
   return false;
  }
  if( document.myForm.EMail.value == "" )
  {
   alert( "Please provide your Email!" );
   document.myForm.EMail.focus() ;
   return false;
  }
  if( document.myForm.Zip.value == "" ||
      isNaN( document.myForm.Zip.value ) ||
      document.myForm.Zip.value.length != 5 )
  {
   alert( "Please provide a zip in the format #####." );
   document.myForm.Zip.focus() ;
   return false;
  }
  if( document.myForm.Country.value == "-1" )
  {
   alert( "Please provide your country!" );
   return false;
  }
  return( true );
}
//-->
</script>

Vérification du format des données :

Nous allons maintenant voir comment nous validons les données du formulaire que nous saisissons avant de les soumettre au serveur Web.

Cet exemple montre comment valider une adresse email saisie, ce qui signifie que l'adresse email doit contenir au moins un symbole @ et un point (.). De plus, @ ne doit pas être le premier caractère de l'adresse e-mail et le dernier point doit être un caractère après le symbole @ :

<script type="text/javascript">
<!--
function validateEmail()
{
 
  var emailID = document.myForm.EMail.value;
  atpos = emailID.indexOf("@");
  dotpos = emailID.lastIndexOf(".");
  if (atpos < 1 || ( dotpos - atpos < 2 )) 
  {
    alert("Please enter correct email ID")
    document.myForm.EMail.focus() ;
    return false;
  }
  return( true );
}
//-->
</script>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemples de programmation JavaScript AOP_compétences JavascriptArticle suivant：Exemples de programmation JavaScript AOP_compétences Javascript

Articles Liés

Voir plus