AKO SKONTROLOVAŤ SILU HESLA POMOCOU JAVASCRIPT, CSS A JQUERY

Ako skontrolovať silu hesla pomocou JavaScript, CSS a jQuery

Heslo je najdôležitejším spôsobom zabezpečenia vašich údajov. Ak je heslo slabé, nie je také silné, aby mal k vašim údajom prístup ktokoľvek, je veľmi dôležité vytvoriť si bezpečné heslo kdekoľvek potreba.In v tomto návode sa naučíme „Ako skontrolovať silu hesiel pomocou JavaScript, CSS a jQuery“

Toto je názov obrázku

javascript matematická absolútna hodnota

Na vytvorenie kontroly sily hesla pomocou JavaScriptu, jQuery a CSS potrebujete iba dva kroky:-

1. Vytvorte súbor HTML a definujte značky a skripty pre Kontrola sily hesla

Vytvoríme súbor HTML a uložíme ho s názvom heslo.html

 $(document).ready(function(){ $('#pass').keyup(function(){ check_pass(); }); }); function check_pass() { var val=document.getElementById('pass').value; var meter=document.getElementById('meter'); var no=0; if(val!='') { // If the password length is less than or equal to 6 if(val.length6 && (val.match(/[a-z]/) || val.match(/d+/) || val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)))no=2; // If the password length is greater than 6 and contain alphabet,number,special character respectively if(val.length>6 && ((val.match(/[a-z]/) && val.match(/d+/)) || (val.match(/d+/) && val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) || (val.match(/[a-z]/) && val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/))))no=3; // If the password length is greater than 6 and must contain alphabets,numbers and special characters if(val.length>6 && val.match(/[a-z]/) && val.match(/d+/) && val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/))no=4; if(no==1) { $('#meter').animate({width:'50px'},300); meter.style.background; document.getElementById('pass_type').innerHTML='Very Weak'; } if(no==2) { $('#meter').animate({width:'100px'},300); meter.style.background; document.getElementById('pass_type').innerHTML='Weak'; } if(no==3) { $('#meter').animate({width:'150px'},300); meter.style.background; document.getElementById('pass_type').innerHTML='Good'; } if(no==4) { $('#meter').animate({width:'200px'},300); meter.style.background; document.getElementById('pass_type').innerHTML='Strong'; } } else { meter.style.background; document.getElementById('pass_type').innerHTML=''; } } Password Strength Checker Using jQuery and CSS

V tomto kroku používame regulárny výraz na nájdenie sily hesla. Používame tri regulárne výrazy:-

val.match (/[a-z]/) sa používa na zistenie, či heslo obsahuje akúkoľvek abecedu.
val.match (/ d+/) sa používa na zistenie, či heslo obsahuje nejaké číslo.
val.match (/.[!,@,#,$,%,^,&,*,?,_, ~,-, (,))/) sa používa na zistenie, či heslo obsahuje špeciálne znaky.

Na vytváranie animácií o sile hesla používame jQuery Animate.

kódovanie otázok na amazonskom pohovore

2. Vytvorte súbor CSS a definujte štýl pre nástroj Kontrola sily hesla

Vytvoríme súbor CSS a uložíme ho s názvom password_style.css.

body { font-family:helvetica; } #heading { margin-top:150px; text-align:center; font-size:27px; color:#2E2EFE; } #pass { margin-left:25%; height:45px; width:500px; border-radius:3px; border:1px solid grey; padding:10px; font-size:18px; } #meter_wrapper { border:1px solid grey; margin-left:38%; margin-top:20px; width:200px; height:35px; border-radius:3px; } #meter { width:0px; height:35px; border-radius: } #pass_type { font-size:20px; margin-top:20px; margin-left:45%; text-align:center; color:grey; }

To je všetko, takto sa dá skontrolovať sila hesla pomocou jQuery a CSS. Tento kód si môžete ďalej prispôsobiť podľa svojich požiadaviek. A neváhajte sa k tomuto tutoriálu vyjadriť.

Ďakujem za čítanie ! Ak sa vám tento príspevok páčil, zdieľajte ho so všetkými svojimi priateľmi z oblasti programovania!

#JavaScript #CSS #jQuery #Password

Ako skontrolovať silu hesla pomocou JavaScript, CSS a jQuery