Tarkista salasanan vahvuus JavaScriptin ja säännöllisten lausekkeiden avulla

Tarkista salasanan vahvuus JavaScriptin ja säännöllisten lausekkeiden avulla

Tein tutkimusta löytääksesi hyvän esimerkin salasanan vahvuuden tarkistimesta, joka käyttää JavaScript että Säännölliset lausekkeet (Regex). Työssämme olevassa sovelluksessa teemme postin takaisin salasanan vahvuuden tarkistamiseksi ja se on melko hankalaa käyttäjillemme.

Mikä on Regex?

Säännöllinen lauseke on merkkijono, joka määrittää hakumallin. Yleensä tällaisia ​​malleja käytetään merkkijonohakualgoritmeilla löytää or Etsi ja korvaa merkkijonotoiminnot tai syötteen vahvistus. 

Tämä artikkeli ei todellakaan ole opettaa sinulle säännöllisiä ilmauksia. Tiedä vain, että kyky käyttää säännöllisiä lausekkeita yksinkertaistaa kehitystäsi, kun etsit kuvioita tekstistä. On myös tärkeää huomata, että useimmat kehityskielet ovat optimoineet säännöllisen lausekkeen käytön… joten Regex on tyypillisesti paljon nopeampi sekä palvelin- että asiakaspuolella sen sijaan, että jäsennettäisiin ja etsitään merkkijonoja vaihe vaiheelta.

Etsin verkosta melko vähän ennen kuin löysin esimerkki joitain hienoja säännöllisiä lausekkeita, jotka etsivät pituuden, merkkien ja symbolien yhdistelmää. Howver, koodi oli hieman liiallinen makuuni ja räätälöity .NET: lle. Joten yksinkertaistin koodia ja laitoin sen JavaScriptiin. Tämä tekee siitä vahvan salasanan vahvuuden reaaliajassa asiakkaan selaimessa ennen sen lähettämistä takaisin ... ja antaa käyttäjälle palautetta salasanan vahvuudesta.

Kirjoita salasana

Jokaisella näppäimistön painalluksella salasana testataan säännöllisen lausekkeen suhteen, ja sitten palautetta annetaan käyttäjälle sen alapuolella.




Kirjoita salasana

Tässä on koodi

- Säännölliset lausekkeet tee upea työ koodin pituuden minimoimiseksi:

  • Lisää merkkejä - Jos pituus on alle 8 merkkiä.
  • Heikko - Jos pituus on alle 10 merkkiä eikä sisällä symboleiden, kirjainten ja tekstien yhdistelmää.
  • keskikokoinen - Jos pituus on 10 merkkiä tai enemmän ja siinä on yhdistelmä symboleja, kirjaimia, tekstiä.
  • Vahva - Jos pituus on vähintään 14 merkkiä ja siinä on yhdistelmä symboleja, kirjaimia, tekstiä.

<script language="javascript">
    function passwordChanged() {
        var strength = document.getElementById('strength');
        var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{8,}).*", "g");
        var pwd = document.getElementById("password");
        if (pwd.value.length == 0) {
            strength.innerHTML = 'Type Password';
        } else if (false == enoughRegex.test(pwd.value)) {
            strength.innerHTML = 'More Characters';
        } else if (strongRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:green">Strong!</span>';
        } else if (mediumRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:orange">Medium!</span>';
        } else {
            strength.innerHTML = '<span style="color:red">Weak!</span>';
        }
    }
</script>
<input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
<span id="strength">Type Password</span>

Paranna salasanapyyntöäsi

On tärkeää, että et vain vahvista salasanan rakennetta Javascriptissasi. Tämän avulla kuka tahansa, jolla on selaimen kehitystyökalut, voi ohittaa komentosarjan ja käyttää haluamaasi salasanaa. Sinun tulisi AINA käyttää palvelinpuolen tarkistusta vahvistaaksesi salasanan vahvuus ennen kuin tallennat sen alustallesi.

34 Kommentit

  1. 1
  2. 2

    KIITOS! KIITOS! KIITOS! Olen hölmöillut 2 viikkoa pirun salasanan vahvuuskoodilla muilta verkkosivustoilta ja vedän hiukseni ulos. Sinun on lyhyt, toimii aivan kuten minä haluan ja mikä parasta, javascript-noviisi on helppo muokata! Halusin kaapata voimaa koskevan päätöksen eikä antaa lomakkeen lähettää päivittää käyttäjän salasanaa, ellei se täytä vahvuustestiä. Toisten ihmisten koodi oli liian monimutkainen tai ei toiminut oikein tai jokin muu. Minä rakastan sinua! XXXXX

  3. 4

    kiitos jumalalle ihmisistä, jotka pystyvät todella kirjoittamaan koodinpätkän oikein.
    Oli samanlainen kokemus kuin Janis.

    Tämä toimii heti laatikosta, joka on täydellinen kaltaisilleni ihmisille, jotka eivät voi koodata javascriptiä!

  4. 5
  5. 6

    Hei, ensinnäkin kiitos paljon ur-ponnisteluistani, yritin käyttää tätä Asp.net: n kanssa, mutta ei toiminut, käytän

    tagin sijasta, eikä se toiminut, ehdotuksia ?!

  6. 7
  7. 8
  8. 9
  9. 10
  10. 11

    “P @ s $ w0rD” näkyy voimakkaana, vaikka se murtuisi melko nopeasti sanakirjan hyökkäyksellä…
    Jotta tällainen ominaisuus voidaan ottaa käyttöön ammattimaisessa ratkaisussa, mielestäni on tärkeää yhdistää tämä algoritmi sanakirjan tarkistukseen.

  11. 12
  12. 13
  13. 14
  14. 15
  15. 16
  16. 17
  17. 18
  18. 19

    Voisiko joku kertoa, miksi se ei toiminut minun ..

    kopioin kaiken koodin ja liitin sen notepad ++: iin, mutta se ei toimi ollenkaan?
    auttaisitko minua..

  19. 20
  20. 21
  21. 22
  22. 23
  23. 24

    Tämäntyyppinen "vahvuuden tarkistaja" johtaa ihmiset erittäin vaaralliselle tielle. Se arvostaa merkkien monimuotoisuuden yli salasanan pituuden, mikä johtaa siihen, että lyhyemmät, monimuotoisemmat salasanat ovat vahvempia kuin pidemmät, vähemmän erilaiset salasanat. Se on harhaluulo, joka saa käyttäjät ongelmiin, jos heillä on koskaan vakava hakkerointi uhka.

    • 25

      En ole eri mieltä, Jordan! Esimerkki esitettiin yksinkertaisesti esimerkkinä käsikirjoituksesta. Suosittelen ihmisille, että salasananhallintatyökalun avulla luodaan itsenäiset tunnuslauseet kaikille sivustoille, jotka ovat ainutlaatuisia. Kiitos!

  24. 26
  25. 27
  26. 28
  27. 29
  28. 31
  29. 33

    Olet elävä säästäjä! Parsasin merkkijonoja vasemmalle oikealle ja keskelle ja ajattelin, että on parempi tapa, ja löysin koodinpätkänne Regexillä. Pystyi hemmotella sitä sivustolleni ... Sinulla ei ole aavistustakaan kuinka paljon tämä auttoi. Kiitos paljon Douglas!

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.