Comment configurer un formulaire en javascript-Questions et réponses frontales-php.cn

Comment configurer un formulaire en javascript

PHPz

Libérer： 2023-04-21 09:18:31

original

741 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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;

Copier après la connexion

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;

Copier après la connexion

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 :

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

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

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!