js如何進行表單的簡單密碼驗證？（程式碼範例）-js教程-PHP中文網

首頁

web前端

js教程

js如何進行表單的簡單密碼驗證？（程式碼範例）

青灯夜游

Nov 06, 2018 pm 12:57 PM

js密碼驗證表單驗證

這篇文章帶給大家的內容是介紹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

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles