2016-07-29 5 views
0

Ich schrieb mehrere Funktionen, um zu überprüfen, ob die beiden Passwörter gleich sind. Wenn ich aus dem Feld "Passwort verifizieren" klicke, sollte entweder "Die Passwörter stimmen" oder "Bitte geben Sie Ihr Passwort erneut ein, weil die beiden Passwörter nicht übereinstimmen" angezeigt werden, je nachdem, ob die Passwörter gleich sind oder nicht. Wenn ich jedoch zwei identische oder zwei verschiedene Passwörter eintippe und aus dem Textfeld "Passwort verifizieren" klicke, wird die Nachricht überhaupt nicht angezeigt. Was mache ich hier falsch?Warum werden meine Nachrichten nicht angezeigt, wenn ich aus der Textbox auf meiner Webseite klicke?

Dies ist, was die Aufgabe fragt: Die Webseite sollte zwei Eingabefelder von Typ = "Passwort" haben. Der Benutzer muss ein neues Passwort in das erste Eingabefeld eingeben und dann das Passwort erneut in das zweite Eingabefeld eingeben.

Wenn der Fokus die zweite Box verlässt, überprüft Ihr Skript, ob die Werte beider Boxen gleich und nicht leer sind (5 Punkte). Hinweis: Viele Beispiele im Internet verwenden die HTML-Eigenschaft onchange in der HTML-Datei, um den Ereignishandler aufzurufen. Verwenden Sie keine HTML-Eigenschaft eines beliebigen Typs, um Ereignisse zu verarbeiten. Definieren Sie stattdessen einen Ereignis-Listener in Ihrer JS-Datei (5 Punkte).

Wenn sie nicht übereinstimmen, zeigen Sie eine Meldung an, die besagt, dass ein zweiter Versuch erforderlich ist, und setzen Sie den Fokus im ersten Kennwortfeld zurück. Wenn sie gleich sind, ersetzen Sie alle vorherigen Fehlermeldungen durch eine Meldung, dass die Passwörter übereinstimmen.

Ich verwende eine password.js Datei und eine setpassword.html Datei für diese Webseite.

Meine password.js Datei ist:

var password1 = document.getElementById("txtPassword").value; 
var verifypassword = document.getElementById("txtPWVerified").value; 

var verifypasswordclick = document.getElementById("txtPWVerified"); 

function verifypassword1() { 
    if(password1 == verifypassword && password1 != "" && verifypasword != "") { 
     alert('The passwords match'); 
    } 
    else if(password1 != verifypassword || password1 == "" || verifypasword == "") { 
     alert("Please enter your password again because the two passwords don't match"); 
    } 
} 

verifypasswordclick.onblur = function() { 
    verifypassword1; 
}; 

Meine setpassword.html Datei ist:

<!DOCTYPE html> 
<!-- H5FormValidation.html --> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Register Here</title> 
</head> 

<body> 
    <h2>Register Here</h2> 

    <form id="formTest" method="get" action="processData"> 
    <table> 

    <tr> 
     <td><label for="txtEmail">Email<span class="required">*</span></label></td> 
     <td><input type="email" id="txtEmail" name="email" required></td> 
    </tr> 
    <tr> 
     <td><label for="txtPassword">Password<span class="required">*</span></label></td> 
     <td><input type="password" id="txtPassword" name="password" required></td> 
    </tr> 
    <tr> 
     <td><label for="txtPWVerified">Verify Password<span class="required">*</span></label></td> 
     <td><input type="password" id="txtPWVerified" name="pwVerified" required></td> 
    </tr> 

    <tr> 
     <td>&nbsp;</td> 
     <td> 
      <input type="reset" value="CLEAR" id="btnReset"></td> 
    </tr> 
    </table> 
    </form> 
<script src = "password.js"></script> 
</body> 
</html> 

Antwort

0

Sie sind nicht die verifypassword1 Funktion korrekt aufrufen. Sie benötigen Klammern. Aber anstatt die Funktion innerhalb einer anonymen Funktion aufzurufen, können Sie stattdessen diese Zeile versuchen.

verifypasswordclick.addEventListener("blur",verifypassword1); 

Auch Sie vergleichen die Anfangswerte jedes Mal. Sie müssen die neuen Werte aus den Elementen input jedes Mal abrufen, wenn Sie die Kennwörter überprüfen. In Ihrer verifypassword1 Funktion müssen Sie den neuen Wert von diesen input Elementen so erhalten.

function verifypassword1() { 
    password1 = document.getElementById("txtPassword").value; 
    verifypassword = document.getElementById("txtPWVerified").value; 
    // rest of code 
} 
+0

Wenn ich meine "verifypassword1;" ersetzen phrase unter dem Parameter verifypasswordclick.onblur = function() {Ausdruck mit Ihrem Vorschlag (der "verifypasswordclick.addEventListener (" blur ", verifypassword1);") ist, wird trotzdem keine Nachricht angezeigt. –

+0

@MichaelBao Sie müssen Klammern() nach verifypassword1 hinzufügen, andernfalls wird es während der Ausführung des 'onblur' Handlers nicht aufgerufen. –

+0

Ich sage diese Zeile anstelle von 'verifypasswordclick.onblur = function() {verifypassword1;};' zu verwenden, aber wenn du es so einstellen willst, musst du Klammern verwenden wie 'verifezypasswordclick.onblur = function() {verifezypassword1();}; ' – kamoroso94

0

Statt dieser verifypasswordclick.onblur = function() { verifypassword1;}

Tun Sie dies verifypasswordclick.onblur = verifypassword1;

+1

Danke, das funktioniert. Aber selbst wenn ich dieselben zwei Passwörter eintippe, wird immer noch angezeigt "Bitte geben Sie Ihr Passwort erneut ein, weil die beiden Passwörter nicht übereinstimmen" anstatt "Passwörter stimmen überein". Weißt du, warum? –

+0

@MichaelBao Sind Sie sicher, dass beide Strings gleich sind (auch fallweise)? –

+0

Ja, da bin ich mir sicher. –