使用 JavaScript 或 jQuery 和正則表達式檢查密碼強度(還有服務器端示例!)
我正在做一些研究,以查找使用以下密碼強度檢查器的良好示例 JavaScript的 和 正則表達式 (正則表達式). 在我工作的應用程序中,我們進行回發以驗證密碼強度,這對我們的用戶來說非常不方便。
什麼是正則表達式?
正則表達式是定義搜索模式的一系列字符。 通常,字符串搜索算法會將此類模式用於 找 or 查找和替換 對字符串的操作,或用於輸入驗證。
本文絕對不是要教您正則表達式。 只需知道使用正則表達式的功能將絕對簡化您在搜索文本模式時的開發。 還需要注意的是,大多數開發語言都優化了正則表達式的使用方式…因此,Regex通常比服務器和客戶端都快得多,而不是逐步解析和搜索字符串。
我在網上搜尋了很多之後才發現 一個例子 尋找長度、字符和符號的組合的一些很棒的正則表達式。 但是,該代碼對我來說有點過分並且是為 .NET 量身定制的。 所以我簡化了代碼並將其放在 JavaScript 中。 這使得它在回發之前在客戶端瀏覽器上實時驗證密碼強度……並向用戶提供一些關於密碼強度的反饋。
輸入一個密碼
每次敲擊鍵盤時,都會針對正則表達式對密碼進行測試,然後在其下方的跨度中向用戶提供反饋。
JavaScript 密碼強度函數
正則表達式 在最小化程式碼長度方面做得非常出色。 此 JavaScript 函數檢查密碼的強度以及破解密碼的難度是簡單、中等、困難或極難。 當使用者打字時,它會顯示鼓勵其變得更強的提示。 它根據以下內容驗證密碼:
- 總長: – 如果長度少於或多於 8 個字符。
- 混合情況 – 如果密碼同時包含大寫和小寫字符。
- 民數記 – 如果密碼包含數字。
- 特殊字符 – 如果密碼包含特殊字符。
該功能顯示難度以及進一步加固密碼的一些提示。
function checkPasswordStrength(password) {
// Initialize variables
var strength = 0;
var tips = "";
// Check password length
if (password.length < 8) {
tips += "Make the password longer. ";
} else {
strength += 1;
}
// Check for mixed case
if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
strength += 1;
} else {
tips += "Use both lowercase and uppercase letters. ";
}
// Check for numbers
if (password.match(/\d/)) {
strength += 1;
} else {
tips += "Include at least one number. ";
}
// Check for special characters
if (password.match(/[^a-zA-Z\d]/)) {
strength += 1;
} else {
tips += "Include at least one special character. ";
}
// Return results
if (strength < 2) {
return "Easy to guess. " + tips;
} else if (strength === 2) {
return "Medium difficulty. " + tips;
} else if (strength === 3) {
return "Difficult. " + tips;
} else {
return "Extremely difficult. " + tips;
}
}
如果你想更新提示的顏色,你也可以通過更新代碼之後的代碼來做到這一點 // Return results
線。
// Get the paragraph element
var strengthElement = document.getElementById("passwordStrength");
// Return results
if (strength < 2) {
strengthElement.textContent = "Easy to guess. " + tips;
strengthElement.style.color = "red";
} else if (strength === 2) {
strengthElement.textContent = "Medium difficulty. " + tips;
strengthElement.style.color = "orange";
} else if (strength === 3) {
strengthElement.textContent = "Difficult. " + tips;
strengthElement.style.color = "black";
} else {
strengthElement.textContent = "Extremely difficult. " + tips;
strengthElement.style.color = "green";
}
jQuery 密碼強度函數
使用 jQuery,我們實際上不必編寫帶有 oninput 更新的表單:
<form>
<label for="password">Enter password:</label>
<input type="password" id="password">
<p id="password-strength"></p>
</form>
如果願意,我們還可以修改消息的顏色。
$(document).ready(function() {
$('#password').on('input', function() {
var password = $(this).val();
var strength = 0;
var tips = "";
// Check password length
if (password.length < 8) {
tips += "Make the password longer. ";
} else {
strength += 1;
}
// Check for mixed case
if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
strength += 1;
} else {
tips += "Use both lowercase and uppercase letters. ";
}
// Check for numbers
if (password.match(/\d/)) {
strength += 1;
} else {
tips += "Include at least one number. ";
}
// Check for special characters
if (password.match(/[^a-zA-Z\d]/)) {
strength += 1;
} else {
tips += "Include at least one special character. ";
}
// Update the text and color based on the password strength
var passwordStrengthElement = $('#password-strength');
if (strength < 2) {
passwordStrengthElement.text("Easy to guess. " + tips);
passwordStrengthElement.css('color', 'red');
} else if (strength === 2) {
passwordStrengthElement.text("Medium difficulty. " + tips);
passwordStrengthElement.css('color', 'orange');
} else if (strength === 3) {
passwordStrengthElement.text("Difficult. " + tips);
passwordStrengthElement.css('color', 'black');
} else {
passwordStrengthElement.text("Extremely difficult. " + tips);
passwordStrengthElement.css('color', 'green');
}
});
});
強化密碼請求
重要的是,您不僅僅要驗證 JavaScript 中的密碼構造。 這將使任何擁有瀏覽器開發工具的人都可以繞過腳本並使用他們想要的任何密碼。 在將密碼儲存到平台之前,您應該始終利用伺服器端檢查來驗證密碼強度。
用於密碼強度的 PHP 函數
function checkPasswordStrength($password) {
// Initialize variables
$strength = 0;
// Check password length
if (strlen($password) < 8) {
return "Easy to guess";
} else {
$strength += 1;
}
// Check for mixed case
if (preg_match("/[a-z]/", $password) && preg_match("/[A-Z]/", $password)) {
$strength += 1;
}
// Check for numbers
if (preg_match("/\d/", $password)) {
$strength += 1;
}
// Check for special characters
if (preg_match("/[^a-zA-Z\d]/", $password)) {
$strength += 1;
}
// Return strength level
if ($strength < 2) {
return "Easy to guess";
} else if ($strength === 2) {
return "Medium difficulty";
} else if ($strength === 3) {
return "Difficult";
} else {
return "Extremely difficult";
}
}
用於密碼強度的 Python 函數
def check_password_strength(password):
# Initialize variables
strength = 0
# Check password length
if len(password) < 8:
return "Easy to guess"
else:
strength += 1
# Check for mixed case
if any(char.islower() for char in password) and any(char.isupper() for char in password):
strength += 1
# Check for numbers
if any(char.isdigit() for char in password):
strength += 1
# Check for special characters
if any(not char.isalnum() for char in password):
strength += 1
# Return strength level
if strength < 2:
return "Easy to guess"
elif strength == 2:
return "Medium difficulty"
elif strength == 3:
return "Difficult"
else:
return "Extremely difficult"
密碼強度的 C# 函數
public string CheckPasswordStrength(string password) {
// Initialize variables
int strength = 0;
// Check password length
if (password.Length < 8) {
return "Easy to guess";
} else {
strength += 1;
}
// Check for mixed case
if (password.Any(char.IsLower) && password.Any(char.IsUpper)) {
strength += 1;
}
// Check for numbers
if (password.Any(char.IsDigit)) {
strength += 1;
}
// Check for special characters
if (password.Any(ch => !char.IsLetterOrDigit(ch))) {
strength += 1;
}
// Return strength level
if (strength < 2) {
return "Easy to guess";
} else if (strength == 2) {
return "Medium difficulty";
} else if (strength == 3) {
return "Difficult";
} else {
return "Extremely difficult";
}
}
用於密碼強度的 Java 函數
public String checkPasswordStrength(String password) {
// Initialize variables
int strength = 0;
// Check password length
if (password.length() < 8) {
return "Easy to guess";
} else {
strength += 1;
}
// Check for mixed case
if (password.matches(".*[a-z].*") && password.matches(".*[A-Z].*")) {
strength += 1;
}
// Check for numbers
if (password.matches(".*\\d.*")) {
strength += 1;
}
// Check for special characters
if (password.matches(".*[^a-zA-Z\\d].*")) {
strength += 1;
}
// Return strength level
if (strength < 2) {
return "Easy to guess";
} else if (strength == 2) {
return "Medium difficulty";
} else if (strength == 3) {
return "Difficult";
} else {
return "Extremely difficult";
}
}
如果您只是在尋找一個很棒的密碼生成器,我已經為此構建了一個不錯的在線小工具。