Maison > Article > interface Web > Explication détaillée de l'exemple de confirmation de mot de passe pour la validation du formulaire jQuery

Explication détaillée de l'exemple de confirmation de mot de passe pour la validation du formulaire jQuery

小云云original: 2018-01-11 13:50:393286parcourir

Cet article présente principalement en détail le code d'implémentation de la confirmation du mot de passe de la vérification du formulaire jQuery. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Comme nous le savons tous, lors de la modification du mot de passe, vous devez saisir le mot de passe deux fois. Comment s'assurer que les deux zones de mot de passe contiennent du contenu ? Les deux cases de mot de passe sont-elles identiques ? Une invite sera-t-elle émise s'il n'y a aucune entrée ? OK, tout cela peut être implémenté en utilisant JS. L'idée spécifique est très simple : écrire un événement pour obtenir le nœud dom et déterminer la valeur de l'objet ?
Alors quel événement programmer ? Ce devrait être l'événement onblur ~. Et ajoutez des événements de flou qui perdent le focus dans les deux zones de mot de passe. Il est plus facile d'utiliser jQuery.
Sans plus tarder, passons directement au code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>password验证</title>
    <script src="jquery/jquery-3.1.1.min.js" type="text/javascript"></script>
  </head>
  <body>
      <form ation="psot" method="">
      <label for="password1">请输入密码：</label>
      <input id="password" name="password" onblur="checkpas1();" required="true" type="password"/>
<br/>
      <label for="password1">请确认密码：</label>
      <input type="password" name="repassword" id="repassword" required="true" onChange="checkpas();" />
      <span class="tip" style="color: red;">两次输入的密码不一致</span><br>
      <input type="button" name="submit" value="提交" onclick="checkpas2();"/>
    </form>
    <script>
      $(".tip").hide();
      function checkpas1(){//当第一个密码框失去焦点时，触发checkpas1事件
        var pas1=document.getElementById("password").value;
        var pas2=document.getElementById("repassword").value;//获取两个密码框的值
        if(pas1!=pas2&&pas2!="")//此事件当两个密码不相等且第二个密码是空的时候会显示错误信息
          $(".tip").show();
        else
          $(".tip").hide();//若两次输入的密码相等且都不为空时，不显示错误信息。
        }
      function checkpas(){//当第一个密码框失去焦点时，触发checkpas2件
        var pas1=document.getElementById("password").value;
        var pas2=document.getElementById("repassword").value;//获取两个密码框的值
        if(pas1!=pas2){
          $(".tip").show();//当两个密码不相等时则显示错误信息
        }else{
          $(".tip").hide();
        }
        }
      function checkpas2(){//点击提交按钮时，触发checkpas2事件，会进行弹框提醒以防无视错误信息提交
        var pas3=document.getElementById("password").value;
        var pas4=document.getElementById("repassword").value;
        if(pas3!=pas4){
          alert("两次输入的密码不一致！");
          return false;
        }
      }
    </script>
  </body>
</html>
</html>

J'espère que tout le monde pourra comprendre le code. C'est en fait relativement simple, et vous comprendrez. mieux si vous écrivez plus. Je viens de commencer. Je me trompe, j'espère que quelqu'un pourra le signaler

Recommandations associées :

La méthode de validation de formulaire jQuery simple la plus couramment utilisée

Méthode d'implémentation de la fonction de validation de formulaire AngularJS

Explication détaillée de la fonction de validation de formulaire implémentée par AngularJS pour gagner et perdre la concentration

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

Article précédent：jQuery glisse vers le bas pour charger la page suivante d'explication de l'exemple de donnéesArticle suivant：jQuery glisse vers le bas pour charger la page suivante d'explication de l'exemple de données

Articles Liés

Voir plus