Comment configurer un formulaire en javascript

Avec le développement de la technologie Web et son application dans de plus en plus de scénarios, les formulaires sont devenus l'un des éléments indispensables au développement Web. Les formulaires peuvent être utilisés pour collecter les données saisies par les utilisateurs, ce qui est très important pour de nombreuses applications Web. Lorsque l'utilisateur remplit le formulaire et le soumet, nous devons traiter ces données. Dans ce cas, JavaScript joue un rôle clé.

Cet article explique comment configurer des formulaires à l'aide de JavaScript et explore quelques conseils et techniques courants.

Formulaire de base

Tout d'abord, jetons un coup d'œil à un formulaire HTML de base. Voici le code HTML d'un formulaire simple :

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" required><br><br>

  <input type="submit" value="提交">
</form>

Le formulaire ci-dessus contient trois champs obligatoires : nom, adresse e-mail et âge, ainsi qu'un bouton de soumission. Si l'un des éléments n'est pas renseigné, une boîte de dialogue apparaîtra pour inviter l'utilisateur à remplir l'élément.

Définir les valeurs du formulaire

Définir la valeur d'un formulaire à l'aide de JavaScript peut être effectué par :

document.getElementById("name").value = "John";

Le code ci-dessus définit "John" comme valeur par défaut pour le prénom. Nous pouvons également définir dynamiquement les valeurs du formulaire de cette manière :

document.getElementById("name").value = userName;

Dans ce cas, "userName" est une variable dont la valeur peut être obtenue d'autres manières, par exemple à partir d'une base de données ou d'un autre service Web.

Obtenir la valeur du formulaire

Vous pouvez obtenir la valeur du formulaire via le code suivant :

let nameValue = document.getElementById("name").value;
let emailValue = document.getElementById("email").value;
let ageValue = document.getElementById("age").value;

Ici, les valeurs du formulaire sont stockées dans trois variables. Cela peut être utilisé facilement lors du traitement des données du formulaire.

Validation du formulaire

La validation du formulaire est un élément important qui contribue à protéger le site Web contre les attaques d'utilisateurs malveillants et garantit la validité et l'exactitude des données du formulaire.

Voici quelques techniques courantes de validation de formulaire :

1. Validation des champs obligatoires : dans les formulaires, les champs obligatoires nécessitent souvent une validation obligatoire. Par exemple, dans l'exemple ci-dessus, le nom, l'adresse e-mail et l'âge sont tous requis. Pour garantir que l'utilisateur a rempli les champs obligatoires, nous utilisons l'attribut "obligatoire". Si l'utilisateur soumet un formulaire sans remplir les champs obligatoires, le navigateur l'avertira avant l'échec de la soumission.
2. Vérification de l'e-mail : dans de nombreuses applications Web, nous devons nous assurer que l'adresse e-mail saisie par l'utilisateur est valide. Pour valider les adresses e-mail, nous utilisons des expressions régulières.

Voici un exemple de validation d'une adresse email en JavaScript :

function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}

Dans le code ci-dessus, nous avons utilisé une expression régulière simple qui valide le format de l'adresse email.

3. Soumission du formulaire : lorsque le formulaire reçoit une demande de soumission, nous devons valider les données du formulaire. Ceci peut être réalisé en définissant l'événement "onsubmit" sur le bouton de soumission.

Voici le code JavaScript qui associe la fonction de validation à l'événement de soumission du formulaire :

document.getElementById("myForm").onsubmit = function() {
  if (!validateForm()) {
    return false;
  }
};

Le code ci-dessus validera le formulaire avant sa soumission. Si la validation échoue, le formulaire ne sera pas soumis.

4. Message d'invite : lorsque les données du formulaire ne sont pas valides, nous devons généralement afficher un message d'invite à l'utilisateur concernant le problème. Ceci peut être réalisé en ajoutant des éléments au formulaire, par exemple en ajoutant un élément
   appelé "errorText".

Voici un code JavaScript qui affichera un message d'erreur à l'utilisateur lorsque la validation du formulaire échoue :

function showErrorMessage(field, message) {
  var errorText = document.createElement("div");
  errorText.className = "error";
  errorText.innerHTML = message;
  field.parentNode.insertBefore(errorText, field.nextSibling);
}

Dans le code ci-dessus, nous avons utilisé JavaScript pour créer un élément

nommé "errorText", et l'insérer. avant l'élément frère suivant du champ de formulaire défaillant.

Résumé

Dans cet article, nous avons brièvement présenté la fonction de JavaScript dans la configuration des formulaires, proposé quelques techniques courantes de validation de formulaire et comment valider et publier des messages d'invite avant que le formulaire ne soit soumis. Grâce à ces technologies, nous pouvons mettre en œuvre des interactions et un traitement des données plus avancés dans nos applications de formulaires, garantissant ainsi la sécurité et la validité des données saisies par les utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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