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

php如何使用CodeIgniter4框架？May 31, 2023 pm 02:51 PM

PHP是一种非常流行的编程语言，而CodeIgniter4是一种常用的PHP框架。在开发Web应用程序时，使用框架是非常有帮助的，它可以加速开发过程、提高代码质量、降低维护成本。本文将介绍如何使用CodeIgniter4框架。安装CodeIgniter4框架CodeIgniter4框架可以从官方网站（https://codeigniter.com/）下载。下

Laravel开发：如何使用Laravel Validation验证表单请求？Jun 13, 2023 pm 01:34 PM

Laravel是一个流行的PHPWeb开发框架，它提供了很多方便的功能来加快开发者的工作。其中，LaravelValidation是一种非常实用的功能，它可以帮助我们轻松地验证表单请求和用户输入的数据。本文就将介绍如何使用LaravelValidation验证表单请求。什么是LaravelValidationLaravelValidation是La

如何使用Golang实现Web应用程序的表单验证Jun 24, 2023 am 09:08 AM

表单验证是Web应用程序开发中非常重要的一个环节，它能够在提交表单数据之前对数据进行有效性检查，避免应用程序出现安全漏洞和数据错误。使用Golang可以轻松地实现Web应用程序的表单验证，本文将介绍如何使用Golang来实现Web应用程序的表单验证。一、表单验证的基本要素在介绍如何实现表单验证之前，我们需要知道表单验证的基本要素是什么。表单元素：表单元素是指

如何在 PHP 中使用正则表达式来验证密码格式Jun 22, 2023 am 11:15 AM

在编写PHP程序时，密码验证是经常会用到的功能。而正则表达式则是一个强大的工具，它可以帮助我们快速有效地验证密码格式。本文将介绍如何在PHP中使用正则表达式来验证密码格式，供PHP开发者参考使用。首先，我们需要了解密码强度，因为好的密码应该具有良好的安全性。一个好的密码应该至少包含：大写字母小写字母数字特殊字符（如@、#、$等）较强的密码还要

PHP表单验证技巧：如何使用filter_input函数检验用户输入Aug 01, 2023 am 08:51 AM

PHP表单验证技巧：如何使用filter_input函数检验用户输入引言：在开发Web应用程序时，表单是与用户进行交互的重要工具。而正确地验证用户输入，是保证数据的完整性和安全性的关键步骤之一。PHP提供了filter_input函数，可以方便地对用户输入进行验证和过滤。本文将介绍如何使用filter_input函数来检验用户输入，并提供相关的代码示例。一、

PHP中的表单验证和过滤方法？Jun 29, 2023 pm 10:04 PM

PHP作为一种广泛应用于Web开发的脚本语言，其表单验证和过滤是非常重要的一部分。在用户提交表单的过程中，需要对用户输入的数据进行验证和过滤，以确保数据的安全性和有效性。本文将介绍PHP中如何进行表单验证和过滤的方法和技巧。一、表单验证表单验证是指对用户输入的数据进行检查，以确保数据符合特定的规则和要求。常见的表单验证包括对必填项的验证、邮箱格式、手机号码格

如何在 Go 中使用正则表达式验证密码？Jun 02, 2024 pm 07:31 PM

Go中使用正则表达式验证密码的方法如下：定义正则表达式模式，符合最低密码要求：至少8个字符，包含小写字母、大写字母、数字和特殊字符。使用regexp包中的MustCompile函数编译正则表达式模式。使用MatchString方法测试输入字符串是否与正则表达式模式匹配。

PHP正则表达式验证输入密码是否包含数字、字母和符号Jun 24, 2023 am 11:21 AM

在计算机编程领域，正则表达式是一种强大的工具，它可以大大简化数据的匹配和处理。在开发一个需要用户注册的网站或应用时，为了保证密码的安全性，常常需要对输入的密码进行验证，最好的方法就是使用正则表达式。PHP作为一种流行的服务器端编程语言，内置了正则表达式函数库，可以方便地对输入密码进行验证。在本文中，我们将介绍如何使用PHP正则表达式验证输入密码是否包含数字、

See all articles