webentwicklung-frage-antwort-db.com.de

Die Kennwortüberprüfung besteht aus mindestens 6 Zeichen

Ich habe einen Bestätigungscode für ein Kennwort und ein Bestätigungskennwort geschrieben, um zu überprüfen, ob sie übereinstimmen oder nicht. Außerdem gibt es eine Bedingung, die prüft, ob die Länge meines Passworts weniger als 6 Zeichen beträgt, und schreibt/zeigt einen Fehler, wenn sie weniger als 6 Zeichen enthält. Mein Code funktioniert jedoch nicht korrekt: Wenn ich zu Feld 2 wechsle, wird die Bedingung von Feld 1 nicht geprüft. Wenn beide Bedingungen zutreffen, wird der Fehler immer noch angezeigt.

Hier ist mein Code:

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
    else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }
    else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}  
         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

24
inaz

Verwenden Sie den folgenden Code. Erstens , pass1.length ist nicht korrekt. Sie sollten pass1.value.length schreiben. Zweitens , habe ich hinzugefügt, die beiden Blöcke am Ende zu vergleichen, da Sie zunächst die Länge des ersten Blocks überprüfen sollten. Die Funktion sollte auch bei Änderungen des ersten Blocks aufgerufen werden.

Viel Glück!

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
 	
    if(pass1.value.length > 5)
    {
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }
    else
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
        return;
    }
  
    if(pass1.value == pass2.value)
    {
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
	else
    {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
}  
<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass(); return false;" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>
        

11

Versuche dies:

if(pass1.value.length > 5)
12

vor:

 if(pass1.length > 5)

nach dem:

 if(pass1.value.length > 5)

und Sie sollten die Gleichheit überprüfen, wenn alles passt, wie Länge oder erlaubte Zeichen usw. 

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

    if(pass1.value.length > 5 && pass2.value.length > 5)
    {
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"

        if(pass1.value == pass2.value)
        {
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "ok!"
        }
        else
        {
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = " These passwords don't match"
        }
    }
    else
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }

}
<input name="password" type="password" placeholder="password"  id="pass1"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>

8
Vural Acar
if (pass1.value.length > 5)

Stellen Sie sicher, dass Sie trim () nicht anwenden, da durch das Leeren Leerzeichen entfernt werden und Leerzeichen im Kennwort kein gültiges Zeichen sind.

7
WSk

Wenn Sie die Länge von Pass1 überprüfen, prüfen Sie nicht wirklich den Wert - pass1.length > 5 - Sie sollten ihn in pass1.value.length > 5 ändern.

6
Łukasz Trzewik

Du kannst tun:

if (pass1.value.trim().length > 5)
6
CodeYogi

Um die Länge zu überprüfen, müssen Sie so schreiben

if (pass1.value.length > 5)

und dann funktioniert dein Code gut

6
Nitin Kumar

Sie können den regulären Ausdruck nutzen, um die Validierung für Sie durchzuführen. Beispiel: Ich erlaube einige Sonderzeichen in diesem Kennwort und die Anzahl ist größer als 6

regex = pass1.value.search(/^[a-zA-Z0-9+&@#/%?=~_|!:,.;]{6,}+$/);

if(regex){
    message.innerHTML="Invalid Password.";
}else{
    message.innerHTML = " you have to enter at least 6 digit!";
}
5
Aman Jaiswal

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
	else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	
	if(pass1.value.length > 5){
		pass1.style.backgroundColor = goodColor;
		message.style.color = goodColor;
		message.innerHTML = "character number ok!"
		}
		else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
	
}  
<input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>

4
Raghu Acharya

Die anscheinend einfache Aufgabe der Kennwortüberprüfung kann komplex werden und es kann schwierig sein, festzustellen, warum der Code nicht wie beabsichtigt funktioniert. Ein großer Teil der Herausforderung besteht darin, die bedingte Logik festzulegen und diese Logik in Arbeitscode umzuwandeln.

Sie möchten folgendes erreichen:

  1. Lassen Sie den Benutzer ein Kennwort mit mindestens 6 Zeichen eingeben
  2. Bitten Sie den Benutzer, das Passwort zu bestätigen
  3. Bieten Sie dem Benutzer relevante Rückmeldungen, die ihn durch den Prozess unterstützen

Eine Möglichkeit, dies in eine bedingte Logik (im Pseudocode) umzuwandeln, ist wie folgt:

if (password length is less than 6)
  inform user that password should be at least 6 characters
else if (passwords do not match)
  ask user to confirm password
else
  inform user that passwords match, all is ok

Mein Code funktioniert jedoch nicht korrekt: Wenn ich zu Feld 2 wechsle, wird die Bedingung von Feld 1 nicht geprüft. Wenn beide Bedingungen zutreffen, wird der Fehler immer noch angezeigt.

Ihr Code folgt einer anderen Logik (im Pseudocode):

if (passwords match)
  inform user that passwords match, all is ok
else
  inform user that passwords do not match

if (password is more than 5 characters)
  inform user that the password is long enough
else
  inform user that the password should be at least 6 characters

Ein Problem in Ihrem Code besteht darin, dass die Kennwortlänge das letzte ist, was Sie überprüfen. Daher ist die erste if/else-Prüfung redundant (es wird niemals relevantes Feedback ausgegeben, selbst wenn die Kennwörter übereinstimmen), da Ihr Code immer mit der Bereitstellung endet Feedback zur Passwortlänge.

Ein anderes Problem besteht darin, dass Ihr Code Passwörter akzeptiert, die übereinstimmen, selbst wenn sie weniger als 6 Zeichen umfassen. Aus diesem Grund möchten Sie zunächst die Passwortlänge überprüfen und anschließend prüfen, ob beide Passwörter übereinstimmen.

Außerdem führt Ihr Code diese Prüfungen nur aus, wenn der Benutzer in Feld 2 schreibt ('# pass2'). Außerdem müssen Sie einen Ereignishandler zu 'onkeyup' von Feld 1 hinzufügen.

Daher muss Ihre Codelogik neu geschrieben werden. Hier ist eine von mehreren Möglichkeiten, dies zu tun:

function checkPass() {
  var neutralColor = '#fff'; // 'white';
  var badColor     = '#f66'; // 'red';
  var goodColor    = '#6f6'; // 'green';
  
  var password1 = getElm('pass1').value;
  var password2 = getElm('pass2').value;

  //if password length is less than 6
  if (password1.length < 6) {
    feedback('Enter a password of at least 6 characters');
    //we do not care about pass2 when pass1 is too short
    setBGColor('pass2', neutralColor);
    //if pass1 is blank, set neutral background
    if (password1.length === 0) {
      setBGColor('pass1', neutralColor);
    } else {
      setBGColor('pass1', badColor);
    }
  //else if passwords do not match
  } else if (password2 !== password1) {
    //we now know that pass1 is long enough
    feedback('Confirm password');
    setBGColor('pass1', goodColor);
    //if pass2 is blank, set neutral background
    if (password2.length === 0) {
      setBGColor('pass2', neutralColor);
    } else {
      setBGColor('pass2', badColor);
    }
  //else all is well
  } else {
    feedback('Passwords match');
    setBGColor('pass1', goodColor);
    setBGColor('pass2', goodColor);
  }
}

//helper function for document.getElementById()
function getElm(id) {
  return document.getElementById(id);
}

//helper function for setting background color
function setBGColor(id, value) {
  getElm(id).style.backgroundColor = value;
}

//helper function for feedback message
function feedback(msg) {
  getElm('error-nwl').innerHTML = msg;
}
<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass()"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" />
<div id="error-nwl">Enter a password of at least 6 characters</div>

4
Tomas Langkaas

Finden Sie den hinzugefügten Kommentar für die vorgenommenen Änderungen.

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
	else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	
	if(pass1.value.length > 5){           ////////just added value here//
		pass1.style.backgroundColor = goodColor;
		message.style.color = goodColor;
		message.innerHTML = "character number ok!"
		}
		else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
	
}
<input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>

3
Bharat Patel

function checkPassSize(field) {
	var pass = document.getElementById(field);
	var message = document.getElementById('error-nwl');
	var goodColor = "#66cc66";
	var badColor = "#ff6666";		
	if (pass.value && pass.value.length > 5) {
		pass.style.backgroundColor = goodColor;
		message.style.color = goodColor;
		message.innerHTML = "character number ok!"
		return true;
	} else {
		pass.style.backgroundColor = badColor;
		message.style.color = badColor;
		message.innerHTML = " you have to enter at least 6 digit!"
		return false;
	}
}

function checkPass() {
	var pass1 = document.getElementById('pass1');
	var pass2 = document.getElementById('pass2');
	var message = document.getElementById('error-nwl');
	var goodColor = "#66cc66";
	var badColor = "#ff6666";
	
	if(checkPassSize('pass1') && checkPassSize('pass2')){
		if (pass1.value == pass2.value) {
			pass2.style.backgroundColor = goodColor;
			message.style.color = goodColor;
			message.innerHTML = "ok!"
		} else {
			pass2.style.backgroundColor = badColor;
			message.style.color = badColor;
			message.innerHTML = " These passwords don't match"
		}
	}								
}
<input name="password" type="password" placeholder="password"
	id="pass1" onkeyup="checkPassSize('pass1');" />
<input name="repeatpassword" type="password"
	placeholder="confirm password" id="pass2"
	onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>

3
RRZ

Es scheint, dass es ein paar Dinge gibt, die Sie tun möchten.

  1. Das Passwort muss mindestens 6 Zeichen lang sein, andernfalls die Meldung "Sie müssen mindestens 6 Ziffern eingeben!" in rot erscheint.
  2. Die erneute Eingabe muss mit dem Passwort übereinstimmen, ansonsten wird die Meldung "Diese Passwörter stimmen nicht überein" in Rot angezeigt.
  3. Wenn die Bedingung "Beide" erfüllt ist, zeigen Sie eine grüne Meldung "OK" an. (Meine Vermutung).
  4. Wenn die Felder leer sind, dann keine spezielle Farbe. (Meine Vermutung.)
  5. Wenn das Passwort gültig ist, die Wiederholung jedoch leer ist, wird die grüne Nachricht "Zeichennummer ok!" Angezeigt. (Wieder meine Vermutung).

Meine Vorschläge, 

  • wenn Sie onkeyup für pass2 verwenden, dann machen Sie nicht dasselbe in pass1.
  • erwägen Sie, Onfocusout-Ereignis anstelle von Onkeyup zu verwenden.

Der folgende Code sollte das tun, wonach Sie suchen.

function checkPass() {
  var getTag = Id => document.getElementById(Id);
  var pass1 = getTag('pass1');
  var pass2 = getTag('pass2');
  var message = getTag('error-nwl');
  var str;

  //Logic that handles Password.
  if (!pass1.value)
    pass1.removeAttribute('valid');
  else if (pass1.value.length < 6) {
    pass1.setAttribute('valid', false)
    str = " you have to enter at least 6 digit!";
  } else {
    if (!pass2.value)
      str=" character number ok!";
    pass1.setAttribute('valid', true);}

  //Logic that handles Retype.
  if (!pass2.value)
    pass2.removeAttribute('valid');
  else if (pass1.value != pass2.value) {
    pass2.setAttribute('valid', false);
    str = " These passwords don't match";
  } else
    pass2.setAttribute('valid', true);

  
  //Logic that handles the display of message.
  message.removeAttribute('valid');
  if (pass1.value && pass2.value && !str) {
    message.setAttribute('valid', true);
    message.innerHTML = "ok!"
  } else if (str) {
    message.innerHTML = str;
  } else
    message.innerHTML = '';
  return !!message.valid;

}
#pass1[valid=true] {
  background: #66cc66
}
#pass1[valid=false] {
  background: #ff6666
}
#pass2[valid=true] {
  background: #66cc66
}
#pass2[valid=false] {
  background: #ff6666
}
#error-nwl {
  color: #ff6666
}
#error-nwl[valid=true] {
  color: #66cc66
}
<input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass()" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" />
<div id="error-nwl"></div>

3
Hin Fan Chan

Wenn Sie jQuery verwenden, können Sie dieses jQuery Validation Plugin verwenden

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Makes "field" required to be the same as #other</title>
        <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
    </head>
    <body>
        <form id="myform">
            <label for="password">Password</label>
            <input id="password" name="password" />
            <br/>
            <input type="submit" value="Validate!">
        </form>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
        <script>
            // just for the demos, avoids form submit
            jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });
            $( "#myform" ).validate({
                rules: {
                    password: {
                        minlength: 6,
                        maxlength: 25, 
                        required: true
                    }
                }
            });
        </script>
    </body>
</html>

3
MEAbid

Verwenden Sie den folgenden Code 

valid=pass1.value.search(/^[[email protected]_]{6,20}$/);

if(valid != 0){
    message.innerHTML="Invalid Password.";
}else if(pass1.value.length < 6){
      message.innerHTML = " you have to enter at least 6 digit!"
}
3
Veer

Ihr Problem ist das Überprüfen der Länge eines einzelnen DOM-Knotens anstelle der Länge des DOM-Knotenwerts.

Was Sie derzeit haben, ist das Äquivalent von

var pass1 = document.getElementById('pass1');

if ( pass1.length > 5 ) {...

Ein einzelner DOM-Knoten hat nur eine Länge von 1. Wenn er gefunden wurde, könnte er niemals mehr als 5 sein.
.__ Sie wollten die Länge des Werts überprüfen

var pass1 = document.getElementById('pass1');

if ( pass1.value.length > 5 ) {...

Sie möchten dies jedoch wirklich tun, wenn Sie das erste Kennwort eingeben, nicht das zweite.

Mit den richtigen Event-Handlern, besseren Überprüfungen und Klassen für die Nachrichten können Sie dies tun

var pass1   = document.getElementById('pass1');
var pass2   = document.getElementById('pass2');
var message = document.getElementById('error-nwl');

function msg(_msg, good, time) {
    message.innerHTML = _msg;
    message.classList.toggle('bad', !good);
    message.classList.add('visible');
    setTimeout(function() {message.classList.remove('visible')}, time);
}

pass1.addEventListener('input', function() {
    this.classList.remove('bad');
    this.classList.remove('good');
    if (this.value.length > 5) {
        this.classList.add('good');
        msg("Character number ok!", true, 1800);
    }
});

pass1.addEventListener('blur', function() {
    if (this.value.length <= 5) {
        this.classList.remove('good');
        this.classList.add('bad');
        msg("You have to enter at least 6 digit!", false, 1800);
    } else if (pass1.value !== pass2.value) {
    	pass2.classList.remove('good');
        pass2.classList.add('bad');
        msg("Passwords don't match", false, 3000);
    }
});

pass2.addEventListener('input', function() {
    if (this.value.length > 5) {
        var matches  = pass1.value === pass2.value;
        var _message = matches ? "Passwords match!" : "Passwords don't match";
        pass2.classList.toggle('good', matches);
        pass2.classList.toggle('bad', !matches);
        msg(_message, matches, 3000);
    } else {
        message.classList.remove('visible');
        this.classList.remove('good');
        this.classList.remove('bad');
    }
});

pass2.addEventListener('blur', function() {
    var matches  = pass1.value === pass2.value;
    if (!matches) {
        pass2.classList.remove('good');
        pass2.classList.add('bad');
        msg("Passwords don't match", matches, 3000);
    }
});
#pass1.bad,
#pass2.bad {
  background: #ff6666;
}
#pass1.good,
#pass2.good {
  background: #66cc66;
}
#error-nwl {
  opacity: 0;
  color: #66cc66;
  transition: opacity 0.3s ease-in-out;
}
#error-nwl.bad {
  color: #ff6666;
}
#error-nwl.visible {
  opacity: 1;
}
<input name="password" type="password" placeholder="password" id="pass1" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" />
<div id="error-nwl"></div>

3
adeneo

Formularvalidierung erstellen

Wann validieren?

Zunächst einmal gibt es drei Stellen, an denen wir validieren möchten:

  • Validieren des Formulars, wenn der Benutzer es absendet.
  • Überprüfen Sie die Felder, wenn der Benutzer sie bearbeitet.
  • Validierung der Daten, wenn der Server sie empfängt.

Der Grund, warum wir die Daten auf der Serverseite validieren müssen (unabhängig davon, wie gut die anderen beiden Validierungen sind), ist, dass ein böswilliger Benutzer auf den HTML- und JavaScript-Code zugreifen, Anforderungen fälschen oder die clientseitige Validierung auf andere Weise umgehen kann.

Warum benötigen wir eine clientseitige Validierung, wenn die Validierung trotzdem auf der Serverseite erfolgt? Die kurze Antwort lautet, dass die clientseitige Validierung die Anzahl der fehlerhaften Übermittlungen und damit den Datenverkehr verringert. Eine zweite Motivation ist, dass die clientseitige Validierung es ermöglicht, dem Benutzer viel schneller und einfacher Feedback zu geben.

Vor diesem Hintergrund behandelt der aktuelle Beitrag nur die clientseitige Validierung.

Um nun den Validierungscode auszuführen, müssen wir die entsprechenden Ereignisse behandeln. Die empfohlene Methode zum Hinzufügen von Ereignishandlern in JavaScript ist der Aufruf von addEventListener für das Zielelement. Leider ist Browser-Unterstützung in alten Versionen von Internet Explorer nicht gut.

Also werden wir Code aus jQuery wird möglicherweise nicht benötigt ziehen, um Event-Handler hinzuzufügen:

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

Hinweis: attachEvent ist eine proprietäre Erweiterung von Microsoft.


Jetzt müssen wir entscheiden, mit welchen Ereignissen wir fertig werden wollen ...

Die erste Versuchung besteht darin, mit jeder subtilen Änderung der Felder umzugehen. Der Nachteil dabei ist, dass das System dem Benutzer durch Eingabe eines einzelnen Zeichens möglicherweise mitteilt, dass es falsch ist (weil der Wert zu kurz ist oder was auch immer). Dies könnte so interpretiert werden, als ob das eingegebene einzelne Zeichen falsch wäre, und der Benutzer stoppt dann, um vor dem Verfahren zu analysieren, was falsch ist.

Luke Wroblewski, "Inline-Validierung in Web-Formularen", 2009 zeigt, dass die Verwendung des Ereignisses "Unschärfe" (Fokusverlust) zur Validierung dazu führt, dass Benutzer die Formulare schneller ausfüllen.

Folgendes ist ein Auszug aus dem Artikel:

(...) Die Tatsache, dass die Teilnehmer verwirrt waren, als einfache Fragen mit „richtig“ markiert wurden, stützt diese Interpretation:

„Sagen Sie mir, dass ich einen gültigen Namen oder meinen Namen richtig eingegeben habe?“

"Ist dies eine Bestätigung einer korrekt formatierten Postleitzahl oder meiner korrekten Postleitzahl?"

Diese Art von Teilnehmerfragen verursachte beim Testen einige kleinere Probleme. Unsere Teilnehmer wussten, dass wir ihren korrekten Namen oder ihre Postleitzahl nicht kennen konnten. Sie wussten also, dass das grüne Häkchen nicht „korrekt“ bedeutet. Aber was hielten sie davon? Sie waren sich nicht sicher - und das war das Problem. Da unsere Teilnehmer nicht wussten, was die Nachricht bedeutete, stellten sie dem Moderator Fragen, anstatt selbstbewusst die sehr einfachen Fragen zu beantworten.

(...)

Wenn mehrere Teilnehmer beim Beantworten einer Frage eine Fehlermeldung bemerkten, gaben sie ein zusätzliches Zeichen in das Eingabefeld ein und warteten, bis die Nachricht aktualisiert wurde. Wenn die aktualisierte Nachricht weiterhin einen Fehler aufwies, gaben sie ein anderes Zeichen ein und warteten, bis die Validierungsnachricht erneut aktualisiert wurde. Dies führte zu längeren durchschnittlichen Abschlusszeiten.

(...)

"Es ist frustrierend, dass Sie nicht die Chance haben, etwas in [das Feld] zu legen, bevor es Sie rot anblitzt."

„Als ich in das Feld Vorname geklickt habe, wurde sofort gemeldet, dass [mein Vorname] zu kurz ist. Na klar ist es das! Ich habe noch nicht einmal angefangen! "

"Ich fand es ziemlich ärgerlich, wie rote Kreuze auftauchten, als Sie noch nicht fertig getippt hatten. Es lenkt nur wirklich ab. "

Die anfängliche Empfehlung lautet daher, das Ereignis blur zur Validierung zu verwenden.

Dies bringt jedoch ein anderes Problem mit sich. Wenn die Validierung nur für blur erfolgt und der Status eines Felds als ungültig festgelegt wurde, wird die Bearbeitung so lange als ungültig angezeigt, bis der Benutzer das Feld verlässt. Dies kann dazu führen, dass Benutzer sich fragen, ob das, was sie eingegeben haben, immer noch falsch ist, ohne zu wissen, dass die Validierung erst erfolgt, wenn sie das Feld verlassen.

Um dieses Problem zu vermeiden, haben wir für jedes Feld den folgenden Status:

  • Leeren. Es ist der ursprüngliche Status des Feldes. Zeigen Sie nicht alles als ungültig an.
  • Validierung. Der Benutzer tippt oder bearbeitet das Feld. Es ist weder gültig noch ungültig.
  • Gültig. Der Benutzer hat eine gültige Eingabe in das Feld eingegeben.
  • Ungültig. Der Benutzer hat eine ungültige Eingabe in das Feld eingegeben.

Dies führt zu folgendem Zustandsdiagramm:

Validation state diagram

Diagramm erstellt mit yUML .

Hinweis: Aus praktischen Gründen können Empty und Validating als gleichwertig angesehen werden. In beiden Zuständen wird dem Benutzer kein Validierungsstatus angezeigt. Außerdem sollte es möglich sein, in den Zustand Empty zurückzukehren, wenn der Benutzer das Formular zurücksetzt (sofern eine solche Option angegeben ist).

Dann haben wir folgendes:

Hinweis: Sie können auch einen Timer verwenden, um die Validierung zu starten, die nach einem gewissen Intervall von input, change und keyup Veranstaltungen. Um dies korrekt auszuführen, müsste dieser Timer jedes Mal zurückgesetzt werden, wenn eines dieser Ereignisse ausgeführt wird. Es ist fehleranfällig und für wenig Wert.


Wo validieren?

HTML5 fügt bereits verschiedene Mittel für Datenformularvalidierung hinzu. Dennoch ist Browser-Unterstützung nicht die beste. Das bedeutet, dass die HTML5-Validierung, auch wenn wir sie erweitern, je nach Browser möglicherweise nicht funktioniert.

Daher überspringen wir stattdessen die HTML5-Validierung und fügen unsere Ereignisse hinzu:

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

Angesichts der Tatsache, dass wir nur eine Formularvalidierung erstellen und kein Framework oder keine Bibliothek für die Formularvalidierung ... könnten wir einfach das Formularelement und die Felder abrufen, um die von uns gewünschte Validierung vorzunehmen. Wenn wir das tun, muss das Formular kein Parameter sein.

Damit unser Code beim Laden der Seite ausgeführt wird, können wir ein weiteres Snippet aus You Might Not Need jQuery entnehmen:

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

Jetzt müssen wir den Status der Felder speichern können. Dies kann durch benutzerdefinierte Eigenschaften, Attribute oder Klassen des Elementobjekts erfolgen. Die Verwendung von Klassen zur Kennzeichnung der Validierung hilft auch bei der Präsentation des Formulars.

Bei der Validierung des Formulars (submitHandler) müssen Sie entscheiden, ob Sie sich auf die Validierung der gespeicherten Felder verlassen oder erneut validieren möchten. Wenn Sie eine Validierung für ein Feld haben, das von anderen Feldern abhängt, möchten Sie diese Validierung möglicherweise als alt markieren. Auf diese Weise kann der Formularvalidierungscode die Validierung erneut ausführen. In jedem Fall würde die Validierung durchgeführt, indem jedes Feld durchgegangen wird.

Gemäß resetHandler und validatingHandler besteht die Idee darin, den Status valid und invalid aus Gründen der Benutzerfreundlichkeit zu entfernen, die weiter oben erläutert wurden.

Richtig gemacht, sollte es keine Situation geben, in der dem Benutzer ein falsches Signal gegeben wird. Das heißt, der Code sollte das Feld niemals als ungültig darstellen, wenn es gültig ist. Auch sollte das Feld nicht als gültig angezeigt werden, wenn es ungültig ist.


Möglicherweise möchten Sie die HTML5-Validierung deaktivieren. Dazu fügen Sie dem Formular das Attribut novalidate hinzu. Dies kann auch über JavaScript erfolgen:

form.setAttribute('novalidate', 'novalidate');

Möglicherweise möchten Sie auch die Eigenschaft willValidate der Felder anzeigen.

Wenn Sie die HTML5-Validierung verlängern möchten, können Sie die Funktion checkValidity verwenden.

Lesen Sie weiter: clientseitige Formularüberprüfung mit HTML5 und HTML5-Formulare: JavaScript und die Constraint-Validierungs-API .

Auch der Artikel Constraint Validation: Native Client Side Validation für Web Forms Von TJ VanToll enthält gute Beispiele für die HTML5-Validierung.


Wenn wir eine vollständige Formularvalidierungsbibliothek erstellen würden, würden wir uns die Mühe machen, die HTML5-Validierungsattribute zu lesen und ihr Verhalten zu imitieren, um es für alte Browser bereitzustellen. Wir müssten uns auch Gedanken darüber machen, wie wir andere Validierungsregeln festlegen können, die HTML5 nicht bereitstellt (z. B. die Überprüfung, ob zwei Felder übereinstimmen), ohne den JavaScript-Code für jeden Fall anpassen zu müssen (da dies, wie gesagt, bei uns der Fall ist) machen eine Bibliothek).


Wo kann ich Feedback geben?

Der Usability-Vorschlag besteht darin, das Feedback zu integrieren. Das heißt, Sie fügen Inline-Elemente neben dem Feld mit dem Feedback als Text hinzu. Sie können dann CSS oder JavaScript verwenden, um es schick aussehen zu lassen.

Der Grund für diesen Vorschlag ist, dass Leute, die sich auf Screenreader verlassen, das Feedback an der richtigen Stelle erhalten. Auch wenn CSS deaktiviert ist oder nicht geladen werden kann, ist dies weiterhin sinnvoll.

Dies ist so ziemlich das, was Sie bereits mit dem span -Element tun. Sie würden ein pro Feld benötigen. Und vielleicht ist eine für das gesamte Formular, dass Sie eine Nachricht einfügen möchten, die [~ # ~] nicht [~ # ~] direkt mit einem von verknüpft ist die Felder.


Hinweis: Wenn wir den Wert eines Feldes lesen, verwenden wir normalerweise field.value. Die Länge des Wertes ist field.value.length. Es ist jedoch zu beachten, dass sich je nach Art der Eingabe die Art und Weise, wie der Wert gelesen wird, ändert. Verwenden Sie für radio und checkboxfield.checked. Für select benötigen Sie field.options (bei select Feldern, die mehrere Werte haben können, ist besondere Vorsicht geboten). Schließlich haben image, reset, 'button' und submit keinen zu überprüfenden Wert.


Zu viel, zu kompliziert?

Du musst es nicht tun! Andere haben es schon einmal gemacht, und Sie können den Code von ihnen nehmen! Muahahahah!

Dies würde mit einer Open-Source-Bibliothek wie validate.js oder meiner eigenen thoth.js geschehen. Andere Antworten haben andere Bibliotheken angeregt.

Du solltest in der Lage sein finde mehr Lernende . Ich gebe nicht vor, eine vollständige Liste zu erstellen.

Die Wiederverwendung von Code wird als bewährte Methode angesehen. Sie können auch den Code solcher Bibliotheken studieren, um zu erfahren, wie sie funktionieren.


Alte Antwort

Ich beginne mit dem Hinzufügen von Kommentaren zu Ihrem Code:

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    // You start by checking if they match
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
        // And then that messages gets removed by the result of the length check
    // Also, pass1.length is undefined
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}
         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

Stattdessen sollten Sie unter Druck setzen, dass der Status gültig ist, bis er anderweitig überprüft wird:

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    message.style.color = goodColor;
    message.innerHTML = "ok!"

    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
    if(pass1.value.length > 5){
        pass1.style.backgroundColor = goodColor;
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}
         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

Beachten Sie darüber hinaus, dass die Nachricht nicht verschwindet, wenn Sie beide Felder abgleichen und dann das erste bearbeiten. Tatsächlich wird die Nachricht beim Bearbeiten der ersten nie ausgeblendet, da immer noch nur die zweite überprüft wird. Stattdessen können Sie beide überprüfen.

Wenn Sie die Tastatureingabe verwenden, die möglicherweise ärgerlich und verwirrend ist, können Sie die Verwendung von onblur in Betracht ziehen, um zu überprüfen, wann der Benutzer das Feld verlässt (d. H. Wenn das Feld den Fokus verliert, auch bekannt als Unschärfe).

Wenn Sie etwas ausgefalleneres möchten, können Sie die Keyup-Methode verwenden, um die Nachricht zu löschen, während der Benutzer tippt, oder sogar, um einen Timer erneut zu überprüfen, den Sie bei jedem Tastendruck zurücksetzen ...

Oder Sie können HTML5-Validierung verwenden, weil warum nicht?


Ich habe gerade meine Javascript-Bibliothek aktualisiert thoth , um die Überprüfung der Minimallänge zu unterstützen. Außerdem wurde eine Hilfsbibliothek veröffentlicht, um die Formularvalidierung zu vereinfachen. Je nach Fall sind möglicherweise einige Optimierungen erforderlich, insbesondere enthält sie keinen Lokalisierungsmechanismus.

Mit thoth können Sie Ihren Code wie folgt implementieren. Hinweis: Bitte laden Sie die Bibliotheken herunter, wenn Sie sie Ihrem Code hinzufügen möchten.

Thoth stellt sicher, dass diese Überprüfung in IE8 oder höher funktioniert. Wenn kein Javascript verfügbar ist, wird die HTML5-Formularüberprüfung beeinträchtigt. Denken Sie daran, dass der Client immer Javascript und HTML-Code manipulieren kann. Wiederholen Sie daher Ihre Überprüfungen auf dem Server.

.valid
{
    color: #66cc66;
}
.invalid
{
    color: #ff6666;
}
<!DOCTYPE html>
<head>
        <title>Demo</title>
        <script src="https://rawgit.com/theraot/thoth/master/thoth.js"></script>
        <script src="https://rawgit.com/theraot/thoth/master/form_helper.js"></script>
</head>
<form data-on-valid="document.getElementById('ok').style.display='';" data-on-invalid="document.getElementById('ok').style.display='none';" data-lacking="you have to enter at least 6 digit!" data-lacking-class="invalid">
<input name="password" type="password" placeholder="password" id="pass1" minlength="6" required="required"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" minlength="6" data-validate="match(@#pass1)" required="required"/>
</form>
<div id="ok" class="valid" style="display:none">ok!</div>

Es gibt ziemlich viele von data- Attribute hier, ich werde es für Sie aufschlüsseln:

  • data-on-valid: Der Code, der ausgeführt wird, wenn das Formular korrekt überprüft wird.
  • data-on-invalid: Der Code, der ausgeführt wird, wenn das Formular nicht validiert wird.
  • data-lacking: Das Zeichenfolgeformat, das verwendet werden soll, wenn nicht genügend Zeichen vorhanden sind. Ähnlich data-remaining und data-excess funktioniert, wenn vor Erreichen von maxlength noch Platz ist und der Text maxlength überschreitet.
  • data-lacking-class: die CSS-Klasse, die für die fehlende Nachricht verwendet werden soll, ähnlich data-remaining-class und data-excess-class existieren.

Die oben genannten werden von der Hilfsbibliothek form_helper.cs. Aus der Bibliothek thoth wird nur Folgendes verwendet:

  • data-validate: zusätzliche Validierungen. In diesem Fall wird die Validierung hinzugefügt, um zu überprüfen, ob beide Felder übereinstimmen.

Entschuldigung für den Mangel an Dokumentation.

Hinweis: data-on-valid und data-on-invalid sind keine richtigen Ereignisse.

3
Theraot

Hier ist mit dem Arbeitscode. Ändern Sie pass1.length in pass1.value.length und aktualisieren Sie die Farben beider Textfelder basierend auf Validierungen.

<html>

<head>
    <script>
    function checkPass() {
        var pass1 = document.getElementById('pass1');
        var pass2 = document.getElementById('pass2');
        var message = document.getElementById('error-nwl');
        var goodColor = "#66cc66";
        var badColor = "#ff6666";
        if (pass1.value == pass2.value) {
            pass2.style.backgroundColor = goodColor;
            pass1.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "ok!"
        } else {
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = " These passwords don't match"
        }

        if (pass1.value.length > 5 && pass1.value == pass2.value) {
            pass1.style.backgroundColor = goodColor;
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "character number ok!"
        } else {
            pass1.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = " you have to enter at least 6 digit!"
        }

    }
    </script>

</head>

<body>
  <input name="password" type="password" placeholder="password" onkeyup="checkPass();" id="pass1" />
  <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass();  return false;" />
  <div id="error-nwl"></div>
</body>
</html>

2
Danyal Sandeelo

Dieser Code überprüft beide Felder während der Eingabe.

<!DOCTYPE html>
<html>

<body>

    <input name="password" type="password" placeholder="password" id="pass1" onkeyup="setStyle(this,document.getElementById('pass2'));" />
    <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="setStyle(this,document.getElementById('pass1'));" />
    <div id="error-nwl"></div>


    <script>
      function isValidLength(element) {
          return (element.value.length > 5);
      }

      function isEqual(element1, element2) {
          if (element1.value.length > 0 && element2.value.length > 0)
              return (element1.value == element2.value);
          return true;
      }

      function setStyle(element, element2) {
          var message = document.getElementById('error-nwl');
          var goodColor = "#66cc66";
          var badColor = "#ff6666";
          var isValidPWD = isValidLength(element) && isEqual(element, element2);

          if (isValidPWD) {
              if (isValidLength(element)) {
                  element.style.backgroundColor = goodColor;
                  message.style.color = goodColor;
                  message.innerHTML = "character number ok!"
              }
              if (isEqual(element, element2)) {
                  element.style.backgroundColor = goodColor;
                  message.style.color = goodColor;
                  message.innerHTML = "ok!"
              }
          } else {
              if (!isValidLength(element)) {
                  element.style.backgroundColor = badColor;
                  message.style.color = badColor;
                  message.innerHTML = " you have to enter at least 6 digit!"
              }

              if (!isEqual(element, element2)) {
                  element.style.backgroundColor = badColor;
                  message.style.color = badColor;
                  message.innerHTML = " These passwords don't match"
              }
          }
      }
  </script>


</body>

</html>

2
Sanka

Es ist besser, Event-Listener Elementen im Code nach dem Laden von DOM zuzuweisen, sodass Sie mehrere Aufrufe von getElementById auslassen können.

var goodColor = "#66cc66", badColor = "#ff6666";

function checkPass() {
  
  message = document.getElementById('error-nwl');
  pass1 = document.getElementById('pass1');
  pass2 = document.getElementById('pass2');

  if (pass1.value.length > 5) {
    pass1.style.backgroundColor = goodColor;
    message.style.color = goodColor;
    message.innerHTML = "character number ok!"

    if (pass2.value == pass1.value) {
      pass2.style.backgroundColor = goodColor;
      message.style.color = goodColor;
      message.innerHTML = "ok!"
    }
    else {
      pass2.style.backgroundColor = badColor;
      message.style.color = badColor;
      message.innerHTML = " These passwords don't match"
    }

  }
  else {
    pass1.style.backgroundColor = badColor;
    message.style.color = badColor;
    message.innerHTML = " you have to enter at least 6 digit!"
  }

}  
<input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass()" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" />
<div id="error-nwl"></div>

0
Ali

sie können zwei Funktionen verwenden, um diesen Job auszuführen.

checkPass1 () prüft, ob das Passwort lang genug ist. checkPass2 () prüft, ob diese Passwörter übereinstimmen. Falls ein Benutzer zuerst # pass2 füllen kann, füge ich checkPass2 () zu checkPass1 () hinzu.

function checkPass1() 
{
    var pass1 = document.getElementById('pass1');
    var message = document.getElementById('length-error');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    var normalColor = "#ffffff"
    if (pass1.value.length <= 5)
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
    else
    {
        pass1.style.backgroundColor = normalColor;
        message.style.color = goodColor;
        message.innerHTML = " the length of password is long enough";
    }
    checkPass2();
}
function checkPass2()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('confirm-error');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value)
    {
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
    else
    {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
}
<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass1()"/>
    <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass2()" />
    <div id="length-error"></div>
    <div id="confirm-error"></div>

0
im_red

sie können validform.js verwenden.

Zum Beispiel:

<script type="text/javascript" src="http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.1/Validform_v5.1_min.js"></script>
<script>
$(".demoform").Validform();

</script>
<form class="demoform">
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="Password range between 6~15 bits!" />
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="The account passwords you entered for the two time were not consistent." /></form>

0
Jeffrey

Man muss bedenken, dass es viele Eventmöglichkeiten und die Reihenfolge der Events gibt.

if(user>0 and user<5){//output username should be 6}
if(pass>0 and pass<5){//output password should be 6}
if(user>5 and pass>5){
    if(user==pass){//password match}
    else{//invalid password}
}

Ich habe Ihren Code geändert, um eine Lösung zu finden

function checkPass() {
  var pass1 = document.getElementById('pass1');
  var pass2 = document.getElementById('pass2');
  var message = document.getElementById('error-nwl');
  var goodColor = "#66cc66";
  var badColor = "#ff6666";

  if (pass1.value.length > 5) {

    pass1.style.backgroundColor = goodColor;
    message.style.color = goodColor;
    if (pass1.value == pass2.value) {
      pass1.style.backgroundColor = goodColor;
      pass2.style.backgroundColor = goodColor;
      message.style.color = goodColor;
      message.innerHTML = "ok!";
    } else {
      if (pass2.value.length > 0) {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match";
      }
    }
  } else {
    if (pass1.value.length <= 5 && pass1.value.length > 0) {
      pass1.style.backgroundColor = badColor;
      message.style.color = badColor;
      message.innerHTML = " you have to enter at least 6 digit user!";
      if (pass2.value.length > 0) {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
      }
    }
    if (pass2.value.length <= 5 && pass2.value.length > 0) {
      pass2.style.backgroundColor = badColor;
      message.style.color = badColor;
      message.innerHTML = " you have to enter at least 6 digit pass!"
    }
  }

}
<html>

<body>
  <input name="password" type="password" placeholder="password" onkeyup="checkPass();" id="pass1" />
  <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass();" />
  <div id="error-nwl"></div>
</body>

</html>

Dies kann alternativ durch Aufrufen der onkeyup-Methode in beiden Feldern und Schreiben verschiedener Funktionen zur Überprüfung von Feldern erfolgen. Dies gewährleistet mehr Flexibilität und wird in den meisten Fällen vermieden. Möglicherweise möchten Sie auch andere Ereignisse wie onBlur hinzufügen, um zu testen, wann der Benutzer den Fokus verlagert. 

Hoffen Sie diese Antwort auf Ihre Frage

0
Saurabh Singh

Probieren Sie es aus!

function resetcol() 
{
    pass1.style = "";
    pass2.style = "";

}

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if (pass1.value == pass2.value && pass1.value.length > 5){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
	else{
        pass1.style = 
        message.style.color = badColor;
        message.innerHTML = "Bad input. your passwords must match, and be at least 6 characters long."
    }
	    	
}  
         <input name="password" type="password" placeholder="password"  id="pass1" onkeyup="resetcol();"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="resetcol();" onchange="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        
PS. Sie müssen das pass2-Feld wegen des onchange-Ereignisses! UPVOTE anklicken, wenn es funktioniert!

0
cascading-style

Sie könnten den zweiten if else-Block in die erste if verschieben und erhalten, was Sie vielleicht gewünscht haben. Sie müssen auch pass1.length in pass1.value.length ändern. 

Ich denke auch, dass Sie die Änderungen in beiden Eingabefeldern überprüfen sollten. Wenn Sie dies nicht tun, kann der Benutzer zum ersten Eingabefeld zurückkehren und das Kennwort anschließend ändern. Der Status der Überprüfung wird nicht aktualisiert.

Hier ist der aktualisierte Code.

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
	
    if(pass1.value.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        //message.innerHTML = "character number ok!"
        if(pass1.value == pass2.value) {
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "Ok!"
        }
    	else{
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = "These passwords don't match!"
        }
    }
    else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "You have to enter at least 6 digits!"
    }
}  
<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass(); return false;"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>
        

0
Ma3x