CRM- en gegevensplatfoarmsE-postmarketing & E-postmarketingautomatisaasje

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

Douglas Karr

Douglas Karr is de oprjochter fan 'e Martech Zone en in erkende ekspert op digitale transformaasje. Douglas hat holpen om ferskate suksesfolle MarTech-startups te begjinnen, hat holpen yn 'e due diligence fan mear dan $ 5 miljard yn Martech-oanwinsten en ynvestearrings, en bliuwt syn eigen platfoarms en tsjinsten lansearje. Hy is in mei-oprjochter fan Highbridge, in advysburo foar digitale transformaasje. Douglas is ek in publisearre skriuwer fan in Dummie's gids en in boek foar bedriuwsliederskip.

Related Articles

33 Comments

  1. DANKEWOL! DANKEWOL! DANKEWOL! Ik haw 2 wiken narre mei ferdomde wachtwurdsterktekoade fan oare websiden en myn hier útlutsen. Yours is koart, wurket krekt sa't ik wol en it bêste fan alles, maklik foar in Javascript-novice om te wizigjen! Ik woe it krêftbeoardieling fêstlizze en it formulier net litte litte om it wachtwurd fan 'e brûker feitlik te aktualisearjen, útsein as it de sterktetest foldie. De koade fan oaren wie te yngewikkeld of wurke net goed of wat oars. Ik hâld fan dy! XXXXXX

  2. Hoi, yn it foarste plak in protte tank foar jo ynspanningen, ik besocht dit te brûken mei Asp.net, mar it wurke net, ik brûk

    ynstee fan tag, en it wurke net, gjin suggestjes?!

  3. "P@s$w0rD" toant sterk, hoewol it frij rap soe wurde kraken mei in wurdboekoanfal ...
    Om sa'n funksje yn te setten op in profesjonele oplossing, leau ik dat it wichtich is om dit algoritme te kombinearjen mei in wurdboekkontrôle.

  4. kin immen fertelle wêrom't it fan my net wurke ..

    ik haw alle koade kopieare en plakke yn notepad ++, mar it wurket hielendal net?
    help my asjebleaft..

  5. Dit soarte fan "sterkte checker" liedt minsken del in hiel gefaarlik paad. It wurdearret karakterferskaat oer passphrase-lingte, wêrtroch it koartere, mear ferskaat wachtwurden as sterker as langere, minder ferskaat wachtwurden beoardielet. Dat is in mislediging dy't jo brûkers yn problemen sil bringe as se oait te krijen hawwe mei in serieuze hackbedriging.

    1. Ik bin it net iens, Jordan! It foarbyld waard gewoan útsteld as foarbyld fan it skript. Myn oanbefelling foar minsken is om in ark foar wachtwurdbehear te brûken om unôfhinklike passphrases te meitsjen foar elke side dy't der unyk is. Tank!

  6. Jo binne in live saver! Ik wie parsing snaren lofts rjochts en sintrum en tocht dat der in bettere manier en fûn jo stikje koade mei help fan Regex. Koe dermei tinke foar myn side ... Jo hawwe gjin idee hoefolle dit holp. Tige tank Douglas !!

Wat tinksto?

Dizze side brûkt Akismet om spam te ferleegjen. Learje hoe't jo kommentaargegevens ferwurke wurde.

Slute

Adblock ûntdutsen

Martech Zone is yn steat om jo dizze ynhâld sûnder kosten te leverjen, om't wy ús side monetearje fia advertinsje-ynkomsten, affiliate keppelings en sponsoring. Wy soene it wurdearje as jo jo advertinsjeblokkerer fuortsmite as jo ús side besjen.