suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie führe ich eine einfache Passwortüberprüfung im Formular in js durch? (Codebeispiel)

Wie führe ich eine einfache Passwortüberprüfung im Formular in js durch? (Codebeispiel)

青灯夜游
青灯夜游Original
2018-11-06 12:57:5314969Durchsuche

Was Ihnen dieser Artikel bringt, ist die Einführung von js zur einfachen Überprüfung von Formularkennwörtern? (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Zuerst müssen wir verstehen, Wie man ein Passwort sicher eingibt?

Viele Websites erfordern mittlerweile eine Registrierung, was bedeutet, dass Benutzern ein Benutzername und ein Passwort zugewiesen werden müssen. Hier sind einige einfache Schritte, um den Prozess sicherer zu machen.

Eingabetyp „Passwort“ verwenden

Verwenden Sie anstelle von , da dies den Browser (und den Benutzer) darüber informiert, dass der Inhalt dieses Felds geschützt werden muss.

Das Passwort wird während der Eingabe nicht auf dem Bildschirm angezeigt, und die meisten Browser „merken“ sich auch nicht den im Passwortfeld eingegebenen Wert wie andere Formularelemente.

In manchen Fällen, beispielsweise auf mobilen Geräten, kann die Anzeige des Passworts die Benutzerfreundlichkeit verbessern, ohne die Sicherheit zu beeinträchtigen. Denn es wird lediglich die Browserdarstellung verfälscht und nicht die übertragenen Daten.

Passworteingabe bestätigen

Da der Passworteingabetyp den eingegebenen Text verdeckt, sollten Sie den Benutzer bestätigen lassen, dass er keinen Fehler gemacht hat. Am einfachsten ist es, Ihr Passwort zweimal einzugeben und zu prüfen, ob es identisch ist.

Eine andere Möglichkeit besteht darin, auf der „Bestätigungsseite“ anzuzeigen, was sie eingegeben haben. Das Problem hierbei ist, dass Ihr Passwort im Browser, Browser-Cache, Proxys usw. angezeigt wird. Aus Sicherheitsgründen sollten Passwörter niemals im HTML-Format angezeigt oder per E-Mail versendet werden.

Erzwingen Sie „starke“ Passwörter (komplexe Passwörter)

Wenn Sie sich Sorgen um die Sicherheit machen, sollten Sie Richtlinien dazu haben, was ein gültiges Passwort ausmacht. Einige gängige Einschränkungen sind:

Mindestens n Zeichen

3

4. Unabhängig von anderen Benutzerdaten (Name, Adresse, Benutzername, ...); lassen wir nun die letzte Anforderung, da sie ein serverseitiges Skript erfordert, einen Blick auf die Möglichkeiten mit dem Client werfen -seitiges HTML und JavaScript.

Serversicherheit


Während ein komplexes Passwort ein guter erster Schritt ist, müssen auf dem Server zusätzliche Schritte unternommen werden, um es zu sichern , um Brute-Force-Angriffe zu verhindern. Eine beliebte Methode ist die Installation von Fail2Ban, um Protokolldateien zu überwachen und wiederkehrende Fehler zu sperren. Dies funktioniert natürlich nur, wenn Ihr Anmeldesystem fehlgeschlagene Anmeldeversuche in der Systemprotokolldatei meldet. Andernfalls muss Ihre Anwendung diese Funktionalität bereitstellen. Passwörter müssen verschlüsselt in der Datenbank oder anderswo gespeichert werden, und etwaige Backups sollten ebenfalls verschlüsselt werden.

Lassen Sie uns

js verwenden, um einen einfachen Vorgang zur Formularüberprüfung

zu implementieren

Das folgende Formular verfügt über drei Eingabefelder: Benutzername, pwd1 und pwd2. Wenn das Formular gesendet wird, analysiert das checkForm-Skript den Eingabewert und gibt „true“ oder „false“ zurück. Wenn ein falscher Wert zurückgegeben wird, wird die Formularübermittlung abgebrochen. 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			function checkForm(form) {
				if(form.username.value == "") {
					alert("错误：用户名不能为空！");
					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(form.pwd1.value.length < 6) {
						alert("错误：密码必须至少包含六个字符！");
						form.pwd1.focus();
						return false;
					}
					if(form.pwd1.value == form.username.value) {
						alert("错误：密码必须与用户名不同！");
						form.pwd1.focus();
						return false;
					}
					re = /[0-9]/;
					if(!re.test(form.pwd1.value)) {
						alert("错误：密码必须包含至少一个数字（0至9）！");
						form.pwd1.focus();
						return false;
					}
					re = /[a-z]/;
					if(!re.test(form.pwd1.value)) {
						alert("错误：密码必须包含至少一个小写字母(a-z)!");
						form.pwd1.focus();
						return false;
					}
					re = /[A-Z]/;
					if(!re.test(form.pwd1.value)) {
						alert("错误：密码必须包含至少一个大写字母(A-Z)!");
						form.pwd1.focus();
						return false;
					}
				} else {
					alert("错误：请检查并确认您输入的密码是否一致！");
					form.pwd1.focus();
					return false;
				}

				alert("You entered a valid password: " + form.pwd1.value);
				return true;
			}
		</script>
	</head>

	<body>
		<form onsubmit="return checkForm(this);">
			<p>用户名: <input type="text" name="username"></p>
			<p>密 码: <input type="password" name="pwd1"></p>
			<p>确认密码: <input type="password" name="pwd2"></p>
			<p><input type="submit"></p>
		</form>
	</body>

</html>
Rendering:


Wenn die beiden von uns eingegebenen Passwörter inkonsistent sind, wird ein Fehler gemeldet:

Wie führe ich eine einfache Passwortüberprüfung im Formular in js durch? (Codebeispiel)

Bitte denken Sie daran, dass Sie, da JavaScript nicht in allen Browsern verfügbar ist, auch serverseitiges Scripting verwenden sollten, um alle Daten zu validieren, bevor Sie sie in einer Datenbank oder anderswo protokollieren.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Wie führe ich eine einfache Passwortüberprüfung im Formular in js durch? (Codebeispiel)

Das obige ist der detaillierte Inhalt vonWie führe ich eine einfache Passwortüberprüfung im Formular in js durch? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 表单验证 JS input 数据库
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：Wie erzwinge ich, dass der Text des Eingabefelds in Großbuchstaben angezeigt wird? (Codebeispiel)Nächster Artikel：Wie erzwinge ich, dass der Text des Eingabefelds in Großbuchstaben angezeigt wird? (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen