首頁 >web前端 >js教程 >js如何進行表單的簡單密碼驗證? (程式碼範例)

js如何進行表單的簡單密碼驗證? (程式碼範例)

青灯夜游
青灯夜游原創
2018-11-06 12:57:5315005瀏覽

這篇文章帶給大家的內容是介紹js進行表單密碼的簡單驗證? (程式碼範例)。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

首先我們要了解如何實現密碼的安全輸入?

許多網站現在都需要註冊,這意味著需要為使用者分配使用者名稱和密碼。以下是一些簡單的步驟,可以讓流程更加安全。

使用「password」輸入型別

使用取代,因為這樣可以讓瀏覽器(和使用者)知道需要保護該欄位的內容。

鍵入時畫面不會顯示密碼,大多數瀏覽器也不會像其他表單元素那樣「記住」在密碼欄位中輸入的值。

在某些情況下,例如在行動裝置上,顯示密碼可以提高可用性而不會影響安全性。畢竟,只有瀏覽器顯示被混淆而不是資料傳輸。

確認密碼輸入

由於密碼輸入類型模糊了鍵入的文本,因此您應該讓使用者確認他們沒有犯錯。最簡單的方法是輸入兩個密碼,然後檢查它們是否相同。

另一種方法是顯示他們作為「確認頁面」的一部分輸入的內容。這裡的問題是您在瀏覽器,瀏覽器緩存,代理等中顯示密碼。為了安全起見,密碼絕不應以HTML格式顯示或透過電子郵件發送。

強制執行「強大」密碼(複雜的密碼)

如果您擔心安全性,您應該對有效密碼的構成有一些政策。一些常見的限制是:

1、至少n個字元;

2、大寫和小寫字元的組合;

3、一個或多個數字;

4、與其他用戶資料無關(名稱,地址,用戶名,...);

現在留下最後一個要求,因為它需要一個伺服器端腳本,讓我們看看使用客戶端HTML和JavaScript的可能性。

伺服器安全性

雖然擁有複雜的密碼是一個很好的第一步,但需要在伺服器上採取其他措施來備份,以防止暴力攻擊。一種流行的方法是安裝Fail2Ban來監視日誌檔案並鎖定重複的錯誤。當然,只有當你的登入系統報告登入嘗試失敗到系統日誌檔案時才有效。否則您的應用程式需要提供此功能。

密碼需要加密儲存在資料庫或其他地方,任何備份也應加密。

下面我們來使用js實作一個簡單的表單驗證的操作

下面的表單有三個輸入欄位:username,pwd1和pwd2。提交表單時,checkForm腳本會解析輸入值並傳回true或false。如果傳回false值,則表單提交將被取消。

<!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>

效果圖:

js如何進行表單的簡單密碼驗證? (程式碼範例)

當我們輸入的兩次密碼不一致時,會報錯:

js如何進行表單的簡單密碼驗證? (程式碼範例)

請記住,由於JavaScript並非在所有瀏覽器中都可用, 因此在將資料記錄到資料庫或其他地方之前,也應使用伺服器端腳本來驗證所有資料。

總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。

以上是js如何進行表單的簡單密碼驗證? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn