dw implémente la vérification du formulaire javascript

Dans le développement front-end, la validation des formulaires est une partie très importante. Il garantit que les données saisies par l'utilisateur répondent aux exigences et offrent une meilleure expérience utilisateur. JavaScript est un langage de programmation très populaire et puissant qui peut être utilisé pour implémenter la validation de formulaires. Dans cet article, nous présenterons comment utiliser dw (Dreamweaver) pour implémenter la validation de formulaire JavaScript.

dw est un excellent éditeur HTML et outil de développement de sites Web. Il dispose de riches outils visuels et d'éditeurs de code qui peuvent aider les développeurs à créer et à gérer des sites Web plus efficacement. dw fournit également des invites de code JavaScript et des fonctions de vérification de la syntaxe, ce qui rend l'écriture de code JavaScript plus facile et plus rapide.

Avant de commencer, nous devons avoir un formulaire. Créer un formulaire dans DW est très simple, il suffit d'utiliser le panneau de configuration du formulaire. Sélectionnez "Fenêtre" -> "Contrôles" dans la barre de menu de dw pour ouvrir le panneau de contrôle du formulaire. Sélectionnez le contrôle de formulaire requis dans le panneau et faites-le glisser vers le centre de la page. Dans cet article, nous utiliserons un simple formulaire de connexion comme exemple pour implémenter la vérification du formulaire.

Voici l'implémentation du code :

1. Mise en œuvre de la vérification de l'e-mail

Dans le formulaire de connexion, les utilisateurs doivent saisir leur propre e-mail, nous devons donc vérifier l'e-mail saisi par l'utilisateur.

Tout d'abord, nous devons définir un identifiant pour que la zone de saisie de l'e-mail fonctionne en JavaScript. Dans dw, vous pouvez définir l'identifiant du contrôle de formulaire dans le panneau des propriétés. Dans cet exemple, nous définissons l'identifiant sur « email » pour la zone de saisie de l'e-mail.

Ensuite, nous devons définir une fonction dans le code JavaScript pour effectuer la vérification des e-mails. Le code est implémenté comme suit :

function validateEmail() {
  var email = document.getElementById("email").value;
  var emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;

  if (!emailPattern.test(email)) {
    alert("请输入有效的邮箱地址！");
    return false;
  }

  return true;
}

Tout d'abord, nous définissons une variable "email" pour stocker l'adresse email saisie par l'utilisateur. Ensuite, nous avons défini une expression régulière pour correspondre aux adresses e-mail. Cette expression régulière correspond aux formats d'adresses e-mail les plus courants.

Ensuite, nous utilisons la méthode test() pour vérifier si l'adresse email saisie par l'utilisateur correspond à l'expression régulière. Si cela ne correspond pas, une boîte d'avertissement apparaîtra pour inviter l'utilisateur à saisir une adresse valide et à renvoyer false. Sinon, renvoie vrai.

Enfin, nous devons lier la fonction à l'événement de soumission du formulaire pour valider le moment où l'utilisateur clique sur le bouton de soumission. Dans dw, vous pouvez définir l'événement de soumission pour le contrôle de formulaire dans le panneau des propriétés.

Le code est implémenté comme suit :

<form onsubmit="return validateEmail()">
  // 表单控件
  <input type="email" id="email" name="email" required>
  
  // 提交按钮
  <input type="submit" value="提交">
</form>

Définissez l'événement onsubmit dans l'élément form et liez-le à la fonction de vérification que vous venez de définir. Lorsque l'utilisateur clique sur le bouton Soumettre, le formulaire valide et soumet automatiquement les données.

2. Mise en œuvre de la vérification du mot de passe

Dans le formulaire de connexion, les utilisateurs doivent également saisir leur propre mot de passe, nous devons donc également vérifier le mot de passe saisi par l'utilisateur.

Les exigences de vérification du mot de passe incluent généralement des restrictions sur la longueur du mot de passe, des restrictions sur la complexité du mot de passe, etc. Dans cet article, nous limitons uniquement la longueur du mot de passe, qui doit être comprise entre 6 et 20 caractères.

Tout d'abord, nous devons définir un identifiant pour que la zone de saisie du mot de passe fonctionne en JavaScript. Dans dw, vous pouvez définir l'identifiant du contrôle de formulaire dans le panneau des propriétés. Dans cet exemple, nous définissons l'identifiant de la zone de saisie du mot de passe sur "mot de passe".

Ensuite, nous devons définir une fonction dans le code JavaScript pour la vérification du mot de passe. Le code est implémenté comme suit :

function validatePassword() {
  var password = document.getElementById("password").value;

  if (password.length < 6 || password.length > 20) {
    alert("密码长度必须在6到20个字符之间！");
    return false;
  }

  return true;
}

Tout d'abord, nous définissons une variable "mot de passe" pour stocker le mot de passe saisi par l'utilisateur. Ensuite, nous déterminons si la longueur du mot de passe est comprise entre 6 et 20 caractères. S'il ne correspond pas, une boîte d'avertissement apparaîtra pour inviter l'utilisateur à saisir un mot de passe valide et à renvoyer false. Sinon, renvoie vrai.

Enfin, nous devons lier la fonction à l'événement de soumission du formulaire pour valider le moment où l'utilisateur clique sur le bouton de soumission. Dans dw, vous pouvez définir l'événement de soumission pour le contrôle de formulaire dans le panneau des propriétés.

Le code est implémenté comme suit :

<form onsubmit="return validateEmail() && validatePassword()">
  // 表单控件
  <input type="email" id="email" name="email" required>
  <input type="password" id="password" name="password" required>
  
  // 提交按钮
  <input type="submit" value="提交">
</form>

Définissez l'événement onsubmit dans l'élément form et liez-le à la fonction de vérification que vous venez de définir. Ici, nous combinons la fonction de vérification des e-mails et la fonction de vérification du mot de passe à l'aide de l'opérateur "&&". La soumission des données n'est autorisée que lorsque la valeur de retour des deux fonctions est vraie.

À ce stade, le processus d'implémentation de la validation du formulaire JavaScript dans dw est terminé. Lorsque les données saisies par l'utilisateur ne répondent pas aux exigences, une boîte d'avertissement apparaîtra pour le rappeler à l'utilisateur et empêcher la soumission du formulaire. De cette manière, nous pouvons mieux protéger la sécurité des données des utilisateurs et offrir une meilleure expérience utilisateur.

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!