Ellenőrizze a jelszó erősségét JavaScript- vagy jQuery-vel és reguláris kifejezésekkel (szerveroldali példákkal is!)
Néhány kutatást folytattam annak érdekében, hogy jó példát találjak egy Jelszóerősség-ellenőrzőre, amely használja JavaScript és a Reguláris kifejezések (regex). A munkahelyemen lévő alkalmazásban visszaküldjük a jelszó erősségét, és ez meglehetősen kényelmetlen a felhasználóink számára.
Mi a Regex?
A reguláris kifejezés egy olyan karaktersorozat, amely meghatározza a keresési mintát. Az ilyen mintákat általában karakterlánc-kereső algoritmusok használják talál or megtalálni és pótolni karakterláncokon végzett műveletek vagy bemeneti ellenőrzés.
Ez a cikk biztosan nem arra szolgál, hogy rendszeres kifejezéseket tanítson. Csak tudd, hogy a reguláris kifejezések használatának képessége abszolút leegyszerűsíti a fejlesztést, amikor mintákat keres a szövegben. Fontos megjegyezni azt is, hogy a legtöbb fejlesztési nyelv optimalizálta a rendszeres kifejezés használatát ... ezért a karakterláncok lépésenkénti elemzése és keresése helyett a Regex általában sokkal gyorsabb mind szerver, mind kliens oldalon.
Elég sokat kerestem az interneten, mire megtaláltam egy példa néhány nagyszerű reguláris kifejezés közül, amelyek hosszúság, karakterek és szimbólumok kombinációját keresik. A kód azonban kissé túlzó volt az én ízlésemnek, és .NET-re lett szabva. Ezért leegyszerűsítettem a kódot, és JavaScriptbe tettem. Így valós időben ellenőrzi a jelszó erősségét a kliens böngészőjében, mielőtt visszaküldené… és visszajelzést ad a felhasználónak a jelszó erősségéről.
Írja be a jelszót
A billentyűzet minden egyes löketével tesztelik a jelszót a reguláris kifejezéssel szemben, majd visszajelzést adnak a felhasználónak az alatta lévő tartományban.
JavaScript jelszó erősség funkció
A Reguláris kifejezések fantasztikus munkát végez a kód hosszának minimalizálásában. Ez a JavaScript funkció ellenőrzi a jelszó erősségét, és azt, hogy a lefóliázás könnyű, közepes, nehéz vagy rendkívül nehéz kitalálni. Miközben a személy gépel, tippeket jelenít meg, amelyekkel arra ösztönözheti, hogy erősebb legyen. Érvényesíti a jelszót a következők alapján:
- Hossz – Ha a hossza 8 karakter alatt van vagy több.
- Vegyes tok – Ha a jelszó kis- és nagybetűket is tartalmaz.
- Számok – Ha a jelszó számokat tartalmaz.
- Speciális karakterek – Ha a jelszó speciális karaktereket tartalmaz.
A funkció megjeleníti a nehézséget, valamint néhány tippet a jelszó további keményítéséhez.
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;
}
}
Ha módosítani szeretné a hegy színét, ezt is megteheti a kód utáni frissítésével // Return results
vonal.
// 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 jelszóerősségi függvény
A jQuery használatával valójában nem kell az űrlapot oninput frissítéssel írnunk:
<form>
<label for="password">Enter password:</label>
<input type="password" id="password">
<p id="password-strength"></p>
</form>
Az üzenetek színét is módosíthatjuk, ha akarjuk.
$(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');
}
});
});
A jelszó igénylés keményítése
Alapvető fontosságú, hogy ne csak a jelszó-konstrukciót érvényesítse a JavaScript-ben. Ez lehetővé tenné, hogy bárki, aki rendelkezik böngészőfejlesztő eszközökkel, megkerülje a szkriptet, és bármilyen jelszót használjon. MINDIG használjon szerveroldali ellenőrzést a jelszó erősségének ellenőrzésére, mielőtt a platformon tárolná.
PHP funkció a jelszó erősségéhez
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-függvény a jelszó erősségéhez
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# funkció a jelszó erősségéhez
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 funkció a jelszó erősségéhez
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";
}
}
És ha csak egy nagyszerű jelszógenerátort keresel, akkor ehhez készítettem egy jó kis online eszközt.