Mange nettsteder som krever påloggingsinformasjon, håndhever en sikkerhetsinnstilling, ofte referert til som krav til kompleksitet for passord. Disse kravene sikrer at brukerpassordene er tilstrekkelig sterke og ikke kan brytes lett.

Hva er et sterkt passord? Vel, det avhenger av hvem du spør. Men tradisjonelle faktorer som bidrar til et passords styrke, inkluderer det er lengde, kompleksitet og uforutsigbarhet. For å sikre passordstyrke krever mange nettsteder brukerpassord for å være alfanumerisk i tillegg til å være en bestemt lengde.

I denne opplæringen konstruerer vi et skjema som gir brukeren tilbakemelding om hvorvidt passordet deres har tilstrekkelig oppfylt de kompleksitetskravene vi skal etablere.

Før vi begynner, la oss få en sneak peak på hva vårt endelige produkt vil se ut (klikk for en demonstrasjon):

Merk: Formålet med denne opplæringen er å vise hvordan et enkelt skript kan skrives ved hjelp av javascript og jQuery for å håndheve komplekse krav til passord. Du vil kunne legge til flere krav til skriptet om nødvendig. Vær imidlertid oppmerksom på at skjema validering (server- og klientside), skjemainnsendelse og andre emner ikke er dekket i dette eksemplet.

Trinn 1: Starter HTML

Først ønsker vi å få vår grunnleggende HTML-startkode. Vi bruker følgende:

<-- Form HTML Here -->

Trinn 2: Form HTML

La oss nå legge til merket som skal brukes til vårt skjema. Vi vil pakke inn våre formelementer i listeposter for bedre struktur og organisering.

Password Verification
Username:
Password:
Register

Her er en forklaring på koden vi brukte:

• span elementer - disse vil bli brukt til visuell styling av våre inngangselementer (som du vil se senere i CSS)
• type="password" - Dette er et HTML5-attributt for formelementer. I støttede nettlesere vil tegnene i dette feltet bli erstattet av sorte prikker og dermed skjule det faktiske passordet på skjermen.

Her er hva vi har så langt:

Trinn 3: Passordinformasjonskasse HTML

La oss nå legge til HTML som vil informere brukeren hvilke kompleksitetskrav som blir oppfylt. Denne boksen vil bli skjult som standard og vises bare når feltet "passord" er i fokus.

Password must meet the following requirements:
At least one letter
At least one capital letter
At least one number
Be at least 8 characters

Hvert listepunkt er gitt et bestemt ID-attributt. Disse ID-ene vil bli brukt til å målrette hvert krav til kompleksitet og vise brukeren om kravet er oppfylt eller ikke. Også hvert element vil bli stylet som «gyldig» hvis brukerens passord har oppfylt kravet eller ugyldig hvis de ikke har møtt det (hvis inntastingsfeltet er tomt, har ingen av kravene blitt oppfylt, derfor er standardklassen " ugyldig").

Her er det vi har så langt:

Trinn 4: Opprett bakgrunnsstil

Vi skal gi våre sideelementer noen grunnleggende styling. Her er en oversikt over hva vi skal gjøre i vårt CSS:

• Legg til en bakgrunnsfarge - jeg brukte # EDF1F4
• Legg til et bakgrunnsbilde med tekstur (opprettet i Photoshop)
• Konfigurer fontstakken vår - Vi bruker en fin sans-serif font stack
• Fjern / endre noen standardinnstillinger for nettleseren

body {background:#edf1f4 url(bg.jpg);font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;font-size:16px;color:#444;}ul, li {margin:0;padding:0;list-style-type:none;}

Trinn 5: Lag bakgrunnsstil

Nå skal vi stile vår hovedbeholder og sentrere den på siden. Vi bruker også noen stiler til vår H1-tag.

#container {width:400px;padding:0px;background:#fefefe;margin:0 auto;border:1px solid #c4cddb;border-top-color:#d3dbde;border-bottom-color:#bfc9dc;box-shadow:0 1px 1px #ccc;border-radius:5px;position:relative;}h1 {margin:0;padding:10px 0;font-size:24px;text-align:center;background:#eff4f7;border-bottom:1px solid #dde0e7;box-shadow:0 -1px 0 #fff inset;border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */text-shadow:1px 1px 0 #fff;}

Det er viktig å merke seg at vi må gi vår H1-tag en grenseradius på sine to øverste hjørner. Hvis vi ikke gjør det, vil H1s bakgrunnsfarve overlappe de avrundede hjørnene til det overordnede elementet (#container), og det vil se slik ut:

legge border-radius til H1-elementet sikrer at våre øverste hjørner forblir avrundet. Her er det vi har så langt:

Trinn 6: CSS-stiler for skjemaet

La oss nå style våre forskjellige formelementer som starter med listelementene i skjemaet:

form ul li {margin:10px 20px;}form ul li:last-child {text-align:center;margin:20px 0 25px 0;

Vi brukte :last-child velg for å velge det siste elementet i listen (knapp) og gi det litt ekstra avstand. (Merk denne valgeren støttes ikke i noen eldre nettlesere). Neste, la oss stilere våre input elementer:

input {padding:10px 10px;border:1px solid #d5d9da;border-radius:5px;box-shadow: 0 0 5px #e8e9eb inset;width:328px; /* 400 (#container) - 40 (li margins) -  10 (span paddings) - 20 (input paddings) - 2 (input borders) */font-size:1em;outline:0; /* remove webkit focus styles */}input:focus {border:1px solid #b9d4e9;border-top-color:#b6d5ea;border-bottom-color:#b8d4ea;box-shadow:0 0 5px #b9d4e9;

Legg merke til at vi har beregnet inntakselementets bredde ved å ta #container-bredden (400px) og trekke ut margene, paddings og grenser som er brukt på inngangens foreldreelementer. Vi brukte også outline egenskap for å fjerne standard WebKit fokus stiler. La oss til slutt bruke noen stiler til våre andre formelementer:

label {color:#555;}#container span {background:#f6f6f6;padding:3px 5px;display:block;border-radius:5px;margin-top:5px;}

Nå har vi noe som ser slik ut:

Trinn 7: Knappstiler

Nå skal vi utforme vårt knappelement. Vi bruker noen CSS3-stiler, slik at brukere med nyere nettlesere får en bedre opplevelse. Hvis du leter etter en god ressurs når du lager bakgrunnsgradienter i CSS3, kan du sjekke ut Ultimate CSS Gradient Generator .

button {background: #57a9eb; /* Old browsers */background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */border:1px solid #326fa9;border-top-color:#3e80b1;border-bottom-color:#1e549d;color:#fff;text-shadow:0 1px 0 #1e3c5e;font-size:.875em;padding:8px 15px;width:150px;border-radius:20px;box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;}button:active {background: #3a76c4; /* Old browsers */background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */box-shadow:none;text-shadow:0 -1px 0 #1e3c5e;}

Trinn 8: Passord Informasjonsboks

Nå skal vi utforme boksen som informerer brukerne om de oppfyller passordskravene. Først vil vi utforme det inneholdende elementet (#pswd_info).

#pswd_info {position:absolute;bottom:-75px;bottom: -115px9; /* IE Specific */right:55px;width:250px;padding:15px;background:#fefefe;font-size:.875em;border-radius:5px;box-shadow:0 1px 3px #ccc;border:1px solid #ddd;}

La oss nå legge til litt stil på H4-elementet:

#pswd_info h4 {margin:0 0 10px 0;padding:0;font-weight:normal;}

Til slutt skal vi bruke CSS ::before velgeren for å legge til en "oppadgående trekant". Dette er en geometrisk karakter som kan settes inn ved hjelp av den tilhørende UNICODE-enheten. Normalt i HTML ville du bruke tegnets HTML-enhet (▲). Men fordi vi legger til det i CSS, må vi bruke UNICODE-verdien (25B2) foran en tilbakeslag.

#pswd_info::before {content: "25B2";position:absolute;top:-12px;left:45%;font-size:14px;line-height:14px;color:#ddd;text-shadow:none;display:block;}

Nå har vi dette:

Trinn 9: Gyldige og ugyldige stater

La oss legge til noen stiler etter våre krav. Hvis kravet er oppfylt, gir vi det en klasse med "gyldig". Hvis det ikke er oppfylt, vil det få en klasse med "ugyldig" (standard klasse). Når det gjelder ikonene, bruker jeg to 16 × 16 pikselikoner fra Silk Icon Set .

.invalid {background:url(../images/invalid.png) no-repeat 0 50%;padding-left:22px;line-height:24px;color:#ec3f41;}.valid {background:url(../images/valid.png) no-repeat 0 50%;padding-left:22px;line-height:24px;color:#3a7d34;}

Fordi vi ikke har inkludert JavaScript-funksjonaliteten som dynamisk vil endre «gyldige» og «ugyldige» klasser, vil alle krav vises som ugyldige (vi endrer dette senere). Her er det vi har så langt:

Skjul boksen

Nå som vi har alt utformet akkurat slik vi ønsker det, skal vi gjemme passordinformasjonsboksen. Vi bytter til synlighet for brukeren ved hjelp av JavaScript. Så la oss legge til følgende regel:

#pswd_info {display:none;}

Trinn 10: Ta tak i omfanget

Her er det vi vil oppnå med vårt skript:

• Når passordfeltet er valgt (: fokus), vis det
• Hver gang brukeren skriver inn et nytt tegn i passordfeltet, må du sjekke og se om dette tegnet oppfyller et av følgende regler for kompleksitet av passord:
  • Minst ett brev
  • Minst ett hovedbrev
  • Minst ett nummer
  • Minst åtte tegn i lengde
• Hvis det gjør det, merk den regelen som "gyldig"
• Hvis det ikke gjør det, merk den regelen som "ugyldig"
• Når passordfeltet ikke er valgt (': uskarphet'), skjul det

Trinn 11: Få jQuery-oppsett

Først må vi legge til jQuery på vår side. Vi bruker den vertsbaserte versjonen. Vi vil også koble til vår "script.js" -fil, som er hvor vi skal skrive koden som trengs for vår passordbekreftelsestest. Så legg til følgende i din stikkord:

I filen "script.js" starter vi med noen grunnleggende jQuery-startkoden for skriptet vårt:

$(document).ready(function() {//code here});

Trinn 12: Konfigurer hendelsesutløserne

I hovedsak har vi tre arrangementer vi skal lytte til:

1. "Tast inn" på passordet inputfelt
(utløser når brukeren trykker på en tast på tastaturet)
2. "Fokus" på inntastingsfeltet for passord
(utløser når passordfeltet er valgt av brukeren)
3. "Blur" på passordet inputfelt
(utløser når passordfeltet ikke er valgt)

Som du kan se, er alle hendelsene vi lytter etter, på passordet inputfelt. I dette eksemplet vil vi velge alle inntastingsfelt der typen er lik passord. jQuery tillater oss også å "kjede" disse hendelsene sammen, i stedet for å skrive ut hver enkelt. Så, for eksempel, i stedet for å skrive dette:

$('input[type=password]').keyup(function() {// keyup event code here});$('input[type=password]').focus(function() {// focus code here});$('input[type=password]').blur(function() {// blur code here});

Vi kan kjede alle hendelsene sammen og skrive følgende:

$('input[type=password]').keyup(function() {// keyup code here}).focus(function() {// focus code here}).blur(function() {// blur code here});

Så, med den kunnskapen, la oss lage vår kode som vil vise eller gjemme passordinformasjonsboksen vår, avhengig av om passordinngangsfeltet er valgt av brukeren eller ikke:

$('input[type=password]').keyup(function() {// keyup code here}).focus(function() {$('#pswd_info').show();}  ) .blur (funksjon () {$('#pswd_info').hide();}  ); 

Du vil nå legge merke til at ved å klikke i inntastingsfeltet for passord, vil passordinformasjonsboksen være synlig. På samme måte, ved å klikke utenfor passordet inputfelt, vil passordinformasjonsboksen bli skjult.

Trinn 13: Kontrollerer kompleksitetsreglene

Alt vi trenger å gjøre nå er at skriptet kontrollerer verdien i passordfeltet hver gang et nytt tegn er oppgitt (ved hjelp av "tastatur" -hendelsen). Så inne i $('input[type=password]').keyup funksjon legger vi til følgende kode:

// set password variablevar pswd = $(this).val();

Dette setter opp en variabel kalt 'pswd' som lagrer gjeldende passordfeltverdi hver gang det er en nøkkeloppgave. Vi vil bruke denne verdien til å kontrollere hver av våre kompleksitetsregler.

Validerer lengden

Nå, i samme tastaturfunksjon, la vi legge til følgende:

//validate the lengthif ( pswd.length < 8 ) {$('#length').removeClass('valid').addClass('invalid');}  ellers {$('#length').removeClass('invalid').addClass('valid');}

Dette kontrollerer om lengden på gjeldende passordverdi er mindre enn 8 tegn. Hvis det er, blir det en "ugyldig" klasse. Hvis det er større enn 8 tegn, blir det en "gyldig" klasse.

Validerer med regulære uttrykk

Som du så over, har vi bare en if / else-setning som tester for å se om kompleksitetsbehovet er oppfylt. Hvis kompleksitetskravet er oppfylt, gir vi det sin ID i passordboksen en klasse med "gyldig". Hvis det ikke er oppfylt, blir det en klasse "ugyldig".

Resten av våre krav krever at vi bruker vanlige uttrykk for å teste kompleksitetsreglene. Så la oss legge til følgende:

//validate letterif ( pswd.match(/[A-z]/) ) {$('#letter').removeClass('invalid').addClass('valid');}  ellers {$('#letter').removeClass('valid').addClass('invalid');}  // validere hovedbokstav (pswd.match (/ [AZ] /)) {$('#capital').removeClass('invalid').addClass('valid');}  ellers {$('#capital').removeClass('valid').addClass('invalid');}  // validere nummerif (pswd.match (/  d /)) {$('#number').removeClass('invalid').addClass('valid');}  ellers {$('#number').removeClass('valid').addClass('invalid');}

Her er en forklaring på de tre om / else setningene vi brukte:

[Az]

Dette uttrykket kontrollerer at minst ett bokstav med A til Z (store bokstaver) eller en gjennom z (små bokstaver) er skrevet inn

[AZ]

Dette uttrykket kontrollerer at minst en stor bokstav er oppgitt

d

Dette vil sjekke om noen siffer 0 til 9

Trinn 14: Test det ut

Det er alt der er til det! Du kan legge til flere til dette hvis du vil. Du kan legge til mer kompleksitetsregler, du kan legge til en innleveringsmetode, eller du kan legge til alt annet du anser nødvendig.