Comment javascript utilise-t-il des expressions régulières pour valider un formulaire ? (exemple de code)

Ce que cet article vous apporte, c'est de présenter comment JavaScript utilise les expressions régulières pour valider les formulaires (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Dans l'article précédent [Comment effectuer une vérification simple du mot de passe sur le formulaire en js ? ] Dans cet article, nous utilisons des exemples pour présenter une méthode plus complète de validation des formulaires. Elle vérifie tout ce que nous voulons vérifier, mais elle utilise beaucoup de code pour tester chaque exigence individuellement et afficher différents messages d'erreur.

Comment réaliser des effets avec une petite quantité de code ? Je pense que beaucoup de gens se poseront de telles questions. En fait, c'est aussi simple. Vous pouvez résoudre ce problème en utilisant des expressions régulières.

Jetons un coup d'œil à la méthode de vérification des expressions régulières javascript du formulaire via la vérification du mot de passe du formulaire.

Code HTML :

<form method="POST" action="" onsubmit="return checkForm(this);">

<p>密  码: <input type="password" name="pwd1"><span> </p>
<p>确认密码: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

La fonction checkForm() de JS vérifie le mot de passe et appelle l'expression régulière :

  function checkForm(form)
  {
    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(!checkPassword(form.pwd1.value)) {
        alert("您输入的密码无效！");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("错误：请检查您输入并确认您的密码！");
      form.pwd1.focus();
      return false;
    }
    return true;
  }

expression régulière js :

function checkPassword(str)
  {
    var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
    return re.test(str);
  }

Effet, entrez le mot de passe (123456) :

Expression utilisée ici La formule Le type est appelé "look-ahead" et il tente de faire correspondre l'expression régulière contenue avec la partie "future" de la chaîne.

Traduire (fonction implémentée par l'expression régulière ci-dessus) :

1. Correspond à une chaîne de six caractères ou plus

2. l'abréviation de [0-9]);

3. Au moins un caractère minuscule

4. Au moins un caractère majuscule

Testez-le :

Si vous souhaitez limiter votre mot de passe aux lettres et aux chiffres uniquement (pas d'espaces ni d'autres caractères), il vous suffit de le modifier légèrement. En utilisant le caractère générique w, nous pouvons compléter :

Expression régulière améliorée :

function checkPassword(str)
  {   
    var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}$/;
    return re.test(str);
  }

Le W est l'abréviation de "n'importe quelle lettre, chiffre ou trait de soulignement".

Ce n'est en fait pas une bonne pratique de limiter les caractères utilisés, car la ponctuation et d'autres symboles offrent une sécurité supplémentaire.

Exemple de formulaire de validation d'expression régulière :

code html :

<form method="POST" action="" onsubmit="return checkForm(this);">
<p>  用 户 名: <input type="text" name="username"><span>  （输入必须只包含字母、数字和下划线）</span></p>
<p>  密     码: <input type="password" name="pwd1"><span>  （输入必须包含至少一个数字/小写/大写字母，并且长度至少为六个字符）</span></p>
<p>确认密码: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

code js :

  function checkPassword(str)
  {
    var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
    return re.test(str);
  }
  function checkForm(form)
  {
    if(form.username.value == "") {
      alert("Error: Username cannot be blank!");
      form.username.focus();
      return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
      alert("错误：用户名必须只包含字母、数字和下划线！");
      form.username.focus();
      return false;
    }
    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(!checkPassword(form.pwd1.value)) {
        alert("您输入的密码无效！");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("错误：请检查您输入并确认您的密码！");
      form.pwd1.focus();
      return false;
    }
    return true;
  }

Vous c'est fini !

Rendu :

Résumé : Comme vous pouvez le constater, les expressions régulières valent la peine d'être apprises. Ils peuvent être utilisés non seulement en JavaScript, mais également en PHP, Perl, Java et bien d'autres langages. Certains éditeurs de texte (pas seulement vi) les autorisent également lors de la recherche ou du remplacement de texte.

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!