Gaan wagwoordsterkte na met JavaScript of jQuery en gereelde uitdrukkings (ook met voorbeelde aan die bedienerkant!)
Ek het navorsing gedoen oor die vind van 'n goeie voorbeeld van 'n wagwoordsterktekontroleerder wat gebruik word JavaScript en Gereelde uitdrukkings (regex). In die toepassing by my werk plaas ons 'n terugplasing om die wagwoordsterkte te verifieer en dit is nogal ongerieflik vir ons gebruikers.
Wat is Regex?
'N Gereelde uitdrukking is 'n reeks karakters wat 'n soekpatroon definieer. Gewoonlik word sulke patrone gebruik deur algoritmes vir snaar soek vind or vind en vervang bewerkings op toutjies, of vir invoer validering.
Hierdie artikel moet u beslis nie gereelde uitdrukkings leer nie. Weet net dat die gebruik van Regular Expressions u ontwikkeling absoluut sal vergemaklik as u patrone in teks soek. Dit is ook belangrik om op te let dat die meeste ontwikkelingstale die gebruik van gereelde uitdrukkings geoptimaliseer het ... dus eerder as om snare stapsgewys te ontleed en te soek, is Regex gewoonlik baie vinniger op die bediener en op die kliënt.
Ek het nogal 'n bietjie op die web gesoek voordat ek dit gekry het n voorbeeld van 'n paar wonderlike gereelde uitdrukkings wat 'n kombinasie van lengte, karakters en simbole soek. Die kode was egter 'n bietjie oordrewe na my smaak en pasgemaak vir .NET. So ek het die kode vereenvoudig en in JavaScript geplaas. Dit laat dit die wagwoordsterkte intyds op die kliënt se blaaier valideer voordat dit terugpos ... en gee terugvoer aan die gebruiker oor die wagwoord se sterkte.
Tik 'n wagwoord
Met elke toetssleutel word die wagwoord aan die normale uitdrukking getoets en dan word die gebruiker terugvoer gegee in 'n omvang daaronder.
JavaScript-wagwoordsterktefunksie
Die Gereelde uitdrukkings doen 'n fantastiese werk om die lengte van die kode te minimaliseer. Hierdie JavaScript-funksie kontroleer die sterkte van 'n wagwoord en of dit maklik, medium, moeilik of uiters moeilik is om te raai. Soos die persoon tik, vertoon dit wenke om hom aan te moedig om sterker te wees. Dit bekragtig die wagwoord gebaseer op:
- Lengte – As die lengte minder as 8 karakters is.
- Gemengde saak – As die wagwoord beide hoof- en kleinletters het.
- Nommers – As die wagwoord nommers insluit.
- Spesiale karakters – As die wagwoord spesiale karakters bevat.
Die funksie wys die moeilikheidsgraad sowel as 'n paar wenke om die wagwoord verder te verhard.
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;
}
}
As jy die kleur van die wenk wil opdateer, kan jy dit ook doen deur die kode op te dateer na die // Return results
lyn.
// 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 Wagwoord Sterkte Funksie
Met jQuery hoef ons nie eintlik die vorm met 'n oninput-opdatering te skryf nie:
<form>
<label for="password">Enter password:</label>
<input type="password" id="password">
<p id="password-strength"></p>
</form>
Ons kan ook die kleur van die boodskappe verander as ons wil.
$(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');
}
});
});
Verhard u wagwoordversoek
Dit is noodsaaklik dat jy nie net die wagwoordkonstruksie binne jou JavaScript bekragtig nie. Dit sal enigiemand met blaaierontwikkelingsnutsgoed in staat stel om die skrif te omseil en die wagwoord te gebruik wat hulle ook al wil hê. U moet ALTYD 'n tjek aan die bedienerkant gebruik om die wagwoordsterkte te valideer voordat u dit op u platform stoor.
PHP-funksie vir wagwoordsterkte
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-funksie vir wagwoordsterkte
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#-funksie vir wagwoordsterkte
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-funksie vir wagwoordsterkte
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";
}
}
En as jy net op soek is na 'n wonderlike wagwoordgenerator, het ek 'n lekker klein aanlyn hulpmiddel daarvoor gebou.