Heim > Artikel > Web-Frontend > Ausführliche Erläuterung des Beispiels zur Passwortbestätigung der jQuery-Formularvalidierung

Ausführliche Erläuterung des Beispiels zur Passwortbestätigung der jQuery-Formularvalidierung

小云云Original: 2018-01-11 13:50:393274Durchsuche

Dieser Artikel stellt hauptsächlich den Implementierungscode der Passwortbestätigung der jQuery-Formularüberprüfung vor. Ich hoffe, er kann jedem helfen.

Wie wir alle wissen, müssen Sie beim Ändern des Passworts das Passwort zweimal eingeben. Wie kann sichergestellt werden, dass beide Passwortfelder Inhalt haben? Sind die beiden Passwortfelder konsistent? Wird eine Eingabeaufforderung angezeigt, wenn keine Eingabe erfolgt? OK, das alles kann mit JS implementiert werden. Die konkrete Idee ist, ein Ereignis zu schreiben, um den Dom-Knoten zu erhalten und den Wert des Objekts zu bestimmen.
Welche Veranstaltung soll also geplant werden? Es sollte das Onblur-Ereignis sein~. Und fügen Sie Unschärfeereignisse hinzu, die den Fokus auf beide Passwortfelder verlieren. Es ist einfacher, jQuery zu verwenden.
Kommen wir ohne Umschweife direkt zum 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>

Ich hoffe, dass jeder den Code verstehen kann, und Sie werden es verstehen Besser ist es, wenn du mehr schreibst. Ich habe gerade erst angefangen. Ich liege falsch, ich hoffe, jemand kann es darauf hinweisen

Verwandte Empfehlungen:

Die am häufigsten verwendete einfache jQuery-Formularvalidierungsmethode

Methode zur Implementierung der AngularJS-Formularvalidierungsfunktion

Detaillierte Erläuterung der von AngularJS implementierten Formularvalidierungsfunktion, um den Fokus zu gewinnen und den Fokus zu verlieren

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispiels zur Passwortbestätigung der jQuery-Formularvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery nach unten schieben, um die nächste Seite mit Datenbeispielerklärungen zu ladenNächster Artikel：jQuery nach unten schieben, um die nächste Seite mit Datenbeispielerklärungen zu laden

In Verbindung stehende Artikel

Mehr sehen