Kontrolearje Wachtwurdsterkte mei JavaScript of jQuery en reguliere ekspresjes (mei foarbylden oan serverside, ek!)

Ik die wat ûndersyk nei it finen fan in goed foarbyld fan in wachtwurdsterkte-kontrôler dy't brûkt JavaSkript en Reguliere ekspresjes (regex). Yn 'e applikaasje op myn wurk meitsje wy in post werom om de wachtwurdsterkte te ferifiearjen en it is frijwat ûngemaklik foar ús brûkers.

Wat is Regex?

In reguliere ekspresje is in folchoarder fan karakters dy't in sykpatroan definiearje. Normaal wurde sokke patroanen brûkt troch algoritmen foar string sykje fine or fine en ferfange operaasjes op snaren, of foar validaasje fan ynput. 

Dit artikel is perfoarst net om jo reguliere ekspresjes te learen. Wit gewoan dat de mooglikheid om Regular Expressions te brûken jo ûntwikkeling absolút sil ferienfâldigjen as jo sykje nei patroanen yn tekst. It is ek wichtich om op te merken dat de measte ûntwikkelingstalen it gebrûk fan reguliere ekspresje hawwe optimalisearre ... dus ynstee fan stapjes foar stapjen te analysearjen en te sykjen, is Regex typysk sawol tsjinner as client-kant folle rapper.

Ik socht it web nochal wat foardat ik fûn in foarbyld fan guon grutte Regular Expressions dy't sykje nei in kombinaasje fan lingte, karakters en symboalen. Lykwols, de koade wie in bytsje oermjittich foar myn smaak en ôfstimd foar .NET. Dat ik ferienfâldige de koade en sette it yn JavaScript. Dit makket it de wachtwurdsterkte yn realtime te falidearjen op 'e browser fan' e kliïnt foardat it werom pleatst ... en jout wat feedback oan 'e brûker oer de sterkte fan it wachtwurd.

Typ in wachtwurd

By elke streek fan it toetseboerd wurdt it wachtwurd hifke oan 'e reguliere ekspresje en dan wurdt feedback jûn oan de brûker yn in span derûnder.

JavaScript Wachtwurd Strength Funksje

De Reguliere ekspresjes dwaan in fantastysk wurk fan in minimalisearje de lingte fan de koade. Dizze Javascript-funksje kontrolearret de sterkte fan in wachtwurd en of it foliejen maklik, medium, lestich of ekstreem lestich te rieden is. As de persoan typt, toant it tips om it oan te moedigjen om sterker te wêzen. It validearret it wachtwurd basearre op:

• Lingte - As de lingte ûnder of mear is 8 tekens.
• Mixed Case - As it wachtwurd sawol haad- en lytse letters hat.
• Numbers - As it wachtwurd befettet nûmers.
• Spesjale tekens - As it wachtwurd spesjale tekens omfettet.

De funksje toant de swierrichheid en ek wat tips foar it ferhardjen fan it wachtwurd fierder.

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 jo ​​​​de kleur fan 'e tip wolle bywurkje, kinne jo dat ek dwaan troch de koade nei de // Return results rigel.

// 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 Wachtwurd Strength Funksje

Mei jQuery hoege wy it formulier eins net te skriuwen mei in oninput update:

<form>
    <label for="password">Enter password:</label>
    <input type="password" id="password">
    <p id="password-strength"></p>
</form>

Wy kinne ek de kleur fan 'e berjochten oanpasse as wy wolle. 

$(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');
        }
    });
});

Ferhurding fan jo wachtwurdoanfraach

It is essensjeel dat jo de wachtwurdkonstruksje net allinich falidearje yn jo Javascript. Dit soe elkenien ynskeakelje mei browser-ûntwikkelingstools om it skript te rûnwei en it wachtwurd te brûken dat se wolle. Jo moatte ALTYD in tsjek fan 'e server brûke om de wachtwurdsterkte te validearjen foardat jo dizze op jo platfoarm opslaan.

PHP-funksje foar wachtwurdsterkte

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-funksje foar wachtwurdsterkte

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 # Funksje Foar Wachtwurd Strength

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-funksje foar wachtwurdsterkte

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 jo gewoan op syk binne nei in geweldige wachtwurdgenerator, haw ik dêr in moai lyts online ark foar boud.

Wachtwurdgenerator