JavaScript 中的密碼驗證 [逐步設置說明]

任何支持身份驗證和授權的網站總是通過登錄要求輸入用戶名和密碼。 如果不是這樣，用戶需要註冊並創建密碼才能登錄下一個會話，因此網站傾向於提供特定的協議或參數。 以下參數通常用於任何形式的密碼驗證。

• 密碼字段只接受字母數字輸入。
• 它應該以大寫字母開頭。
• 至少一個大寫字母密碼。
• 密碼應具有特定長度。
• 密碼中必須使用一個數值。
• 密碼必須有最小和最大長度。

JavaScript 中的密碼驗證可確保在用戶創建密碼時遵循這些參數。 必須滿足給定的條件才能形成合理的強密碼。 可以使用 JavaScript 代碼通過正則表達式驗證密碼的結構。

要在密碼字段中使用 JavaScript 處理密碼驗證，將遵循以下步驟。

Javascript中的密碼驗證

1. 創建 HTML 表單

表單應包含電子郵件、電話號碼和密碼等基本字段。 讓我們看一個定義表單結構的 HTML 代碼示例。

<! 文檔類型html >

< html lang = “en” >

<頭>

<元字符集= “UTF-8” >

<元名稱= “視口”內容= “寬度=設備寬度，初始比例=1.0” >

< title >表格</ title >

</頭>

<身體>

< div類= “容器” >

<表單動作= “/action_page.php” >

< label for = “usrname” >電子郵件地址</ label >

<輸入類型= “文本” id = “用戶名”名稱= “用戶名”必填>

< label for = “psw” >密碼</ label >

<輸入類型= “密碼” id = “psw”名稱= “psw”模式= “(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }” title = “必須至少包含一個數字和一個大小寫字母，並且至少包含8個或更多字符”要求>

<輸入類型= “提交”值= “提交” >

</表格>

</ div >

< div id = “消息” >

< h3 >密碼必須包含以下內容： </ h3 >

< p id = “字母” class = “無效” > A < b >小寫</ b >字母</ p >

< p id = “大寫” class = “無效” > A < b >大寫（大寫） </ b >字母</ p >

< p id = “數字” class = “無效” > A < b >數字</ b ></ p >

< p id = "length" class = "invalid" >最少< b > 16 個字符</ b ></ p >

</ div >

</正文>

</ html >

2.添加CSS

輸入{

寬度： 100% ；

填充： 12px ；

邊框： 1px實心#ccc ；

邊框半徑： 4px ；

box-sizing :邊框框;

邊距頂部： 6px ；

邊距底部： 16px ；

}

/* 設置提交按鈕的樣式 */

輸入[類型=提交]{

背景顏色： #4CAF50 ；

顏色：白色；

}

/* 為輸入設置容器樣式 */

.容器{

背景顏色： #f1f1f1 ；

填充： 20px ；

}

#消息{

顯示：無；

背景： #f1f1f1 ；

顏色： #000 ；

位置：相對；

填充： 20px ；

邊距頂部： 10px ；

}

#消息p {

填充： 10 像素35 像素；

字體大小： 18px ；

}

.有效{

顏色： RGB （ 3、184、190 ） ； _ _ _

}

.有效：之前{

位置：相對；

左： -35px ；

內容： “&#10004;” ;

}

.無效{

顏色：紅色；

}

.無效：之前{

位置：相對；

左： -35px ；

內容： “&#10006;” ;

}

結帳： 2021 年頂級 Javascript 框架

3.添加JavaScript

var myInput =文檔。 getElementById （ “psw” ）；

var字母=文檔。 getElementById （ “字母” ）；

var大寫=文檔。 getElementById （ “資本” ）；

變量編號=文檔。 getElementById （ “數字” ）；

var長度=文檔。 getElementById （ “長度” ）

我的輸入。 onfocus =函數（）{

文件。 getElementById （ “消息” ）。 風格。 顯示= “塊” ；

}

我的輸入。 onblur =函數() {

文件。 getElementById （ “消息” ）。 風格。 顯示= “無” ；

}

我的輸入。 onkeyup =函數() {

var lowerCaseLetters = / [ az ] / g ;

if ( myInput . value . match ( lowerCaseLetters )) {

信。 類列表。 刪除（ “無效” ）；

信。 類列表。 添加（ “有效” ）；

}其他{

信。 類列表。 刪除（ “有效” ）；

信。 類列表。 添加（ “無效” ）；

}

var upperCaseLetters = / [ AZ ] / g ;

if ( myInput . value . match ( upperCaseLetters )) {

資本。 類列表。 刪除（ “無效” ）；

資本。 類列表。 添加（ “有效” ）；

}其他{

資本。 類列表。 刪除（ “有效” ）；

資本。 類列表。 添加（ “無效” ）；

}

變數= / [ 0-9 ] / g ; _

如果（我的輸入。值。匹配（數字））{

號。 類列表。 刪除（ “無效” ）；

號。 類列表。 添加（ “有效” ）；

}其他{

號。 類列表。 刪除（ “有效” ）；

號。 類列表。 添加（ “無效” ）；

}

如果（我的輸入。值。長度> = 8 ）{

長度。 類列表。 刪除（ “無效” ）；

長度。 類列表。 添加（ “有效” ）；

}其他{

長度。 類列表。 刪除（ “有效” ）；

長度。 類列表。 添加（ “無效” ）；

}

}

JavaScript 代碼最初通過 id 獲取元素； 之後，它允許它顯示在屏幕上。 它還運行條件以獲取給定格式的密碼。 大寫字母、小寫字母和數字通過代碼中創建的正則表達式進行驗證。

4.正則表達式/REGEX

正則表達式是匹配字段中傳遞的原始文字組合的模式。 在密碼驗證中，使用 JavaScript 的正則表達式在識別字符串以及它是否為給定格式方面起著至關重要的作用。 正則表達式是 JavaScript 對象。 這些正則表達式寫在 JavaScript 代碼中的斜杠之間，用於密碼驗證。

示例：讓 re=/ac-b/

如何使用正則表達式在 JavaScript 中編寫密碼驗證？

正則表達式由簡單字符和特殊字符組合而成。 正則表達式是根據強密碼的參數或約束形成的。 當字符串或字符存在嚴格匹配時，使用特殊字符。

上面描述的 JavaScript 代碼使用正則表達式來查找大寫字母、小寫字母和數字。 表達式由不同的序列和子序列組成。 正則表達式中使用的每個字符都有一定的規則。

示例：讓數字=/[0-9]/g。 它接受 0-9 範圍內的數字。

結帳： Github 中的 Javascript 項目

從世界頂級大學在線學習軟件課程。 獲得行政 PG 課程、高級證書課程或碩士課程，以加快您的職業生涯。

結論

密碼驗證至關重要，因為它允許用戶創建強密碼並避免任何潛在的密碼破解。 使用 JavaScript，可以添加交互性並因此通知用戶，直到密碼以任何順序包含所有必需的字符。 用 JavaScript 編碼的正則表達式在定義序列中起著關鍵作用。 它將寫入的參數降低到 JavaScript 代碼中。

如果您有興趣了解有關全棧開發的更多信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發執行 PG 計劃，該計劃專為工作專業人士設計，提供 500 多個小時的嚴格培訓、9 個以上的項目和任務, IIIT-B 校友身份，實用的實踐頂點項目和頂級公司的工作協助。