在JavaScript中確認密碼驗證

在本章中，我們將討論使用JavaScript進行密碼驗證。每當用戶在任何網站或應用上創建帳戶時，我們都需要驗證密碼。因此，我們必須驗證有效的密碼并進行確認密碼驗證。要獲得有效的密碼，必須包含以下參數才有效-

密碼應為字母數字。

密碼的首字母應為大寫。

密碼必須包含特殊字符(@，$，！，＆等)。

密碼長度必須大于8個字符。

密碼字段不應為空的最重要之一。

每當用戶創建密碼時，總會有一個確認密碼字段。它檢查用戶輸入的密碼是否與此確認密碼字段相同。要創建有效的密碼，必須將密碼和確認密碼字段的值都匹配。

首先，我們將檢查有效的密碼，然后確認密碼驗證檢查。

有效密碼驗證

在此示例中，我們將檢查用戶創建的密碼是否有效，并與上述所有參數匹配。請參閱下面的代碼以進行密碼驗證。

復制代碼

輸出1

將密碼字段保留為空白時輸出。

輸出2

輸入有效密碼后輸出。

注意：在上面的屏幕截圖中，您可能已經注意到密碼對所有人都是可見的，因為我們使用了輸入type = text。如果希望密碼在輸入時不可見，請在HTML表單中使用input type = password。

確認密碼驗證

在此示例中，我們將通過驗證用戶輸入的兩個密碼是否相同來驗證密碼。加載表單之前，將使用JavaScript在客戶端站點上完成此過程。

復制代碼

輸出量

首先，我們將在密碼中輸入不同的值并確認密碼字段。將彈出一個警告框，并顯示一條消息：密碼不匹配。請參見下面的輸出：

此時，我們將在密碼中輸入相同的值并確認密碼字段，以驗證驗證碼是否正常運行。將彈出一個警告框，并顯示一條消息：密碼創建成功。請參見下面的輸出：

請注意，我們在此表單中使用了另一個按鈕(“重置”)來清除用戶輸入的字段數據。

帶有密碼驗證的完整表格

在以上示例中，您已經學習了驗證有效密碼并確認密碼驗證。現在，我們將兩種驗證都保留在一個表格中，以完成密碼驗證過程。

為此，我們將創建一個簡單的基本注冊表單，其中包含一些字段，例如名字，姓氏，創建密碼和確認密碼。帶星號(*)的字段是必填字段，用戶必須在其中提供一些值。我們將以這種形式進行以下驗證以驗證密碼：

空字段驗證

最小密碼長度驗證，即> 8

最大密碼長度驗證，即<15

確認密碼驗證

除此之外，我們還放置了一個“重置”按鈕以清除表單中的字段數據。當您單擊此重置按鈕時，用戶在字段中提供的所有數據將被清除。現在，請參見下面的代碼：

復制代碼

輸出量

通過執行上述代碼，HTML表單將出現在Web上。在這里，在文本字段中提供數據，然后單擊“提交”按鈕進行處理。根據驗證，如果數據正確，則會彈出一個警告框，并顯示一條消息：您的密碼創建成功。在這里，當您單擊“確定”按鈕時，它將轉到另一個輸出。

屏幕截圖1

當您單擊警報框內的“確定”按鈕時，它將移至簡單的HTML輸出，其中將顯示消息表單數據已成功提交。

屏幕截圖2

提供錯誤條目時的輸出

如果您輸入了錯誤的值或將任何必填字段留空，它將在輸入框的右側顯示錯誤。每次單擊“提交”按鈕進行驗證檢查后，這些錯誤都會一一顯示。請參見以下屏幕截圖中的錯誤：

要檢查所有驗證是否正常工作，請復制代碼并在JavaScript編譯器中執行。

0

相關文章:JavaScript程序將鍵/值對添加到對象 在此示例中，您將學習編寫一個JavaScript程序，該程序將鍵/值對添加到對象。 示例1：使用點表示法將鍵/ […]...

將字符串編碼為Base64的JavaScript程序 在此示例中，您將學習編寫一個JavaScript程序，該程序會將字符串編碼為Base64。 Base64是二進 […]...

解決二次方程式的Javascript程序 在這個例子中，您將學習編寫一個程序來解決JavaScript中的二次方程式。 當已知二次方程的系數時，該程序將 […]...

JavaScript數組forEach() JavaScript Array forEach()方法為每個數組元素執行提供的函數 。 forEach()方 […]...

JavaScript中的this關鍵字 JavaScript this關鍵字 this關鍵字是引用當前對象的參考變量。在這里，我們將在不同示例的幫助下 […]...

JavaScript Date setSeconds()方法 JavaScript Date setSeconds()方法 JavaScript date setSecon […]...

JavaScript Map get()方法 JavaScript Map get()方法 JavaScript map get()方法從Map對象返回元素 […]...

JavaScript Number toString()方法 JavaScript Number toString()方法 JavaScript number toStri […]...

總結

以上是生活随笔為你收集整理的html中验证密码中是包含字母,在JavaScript中确认密码验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。