Mange websteder, der kræver loginoplysninger, håndhæver en sikkerhedsindstilling, der ofte omtales som krav til kompleksitet på adgangskode. Disse krav sikrer, at brugeradgangskoder er tilstrækkeligt stærke og ikke let kan brydes.

Hvad udgør et stærkt kodeord? Nå, det afhænger af hvem du spørger. Men traditionelle faktorer, der bidrager til et kodeords styrke, inkluderer det er længde, kompleksitet og uforudsigelighed. For at sikre adgangskode styrke, kræver mange websteder brugeradgangskoder til at være alfanumeriske ud over at være en bestemt længde.

I denne vejledning opretter vi en formular, der giver brugeren live feedback om, hvorvidt deres adgangskode har opfyldt de kompleksitetskrav, vi vil etablere.

Før vi begynder, lad os tage en sneak peak på, hvad vores endelige produkt vil se ud (klik for en demo):

Bemærk: Formålet med denne vejledning er at vise, hvordan et simpelt script kan skrives ved hjælp af javascript og jQuery for at håndhæve krav til kompleksitet af adgangskoder. Du vil muligvis tilføje yderligere krav til scriptet, hvis det er nødvendigt; Bemærk dog, at form validering (server- og klientside), formularindgivelse og andre emner ikke er omfattet af dette eksempel.

Trin 1: Starter HTML

Først ønsker vi at få vores grundlæggende HTML starter kode. Vi bruger følgende:

<-- Form HTML Here -->

Trin 2: Form HTML

Lad os nu tilføje den markering, der vil blive brugt til vores formular. Vi vil pakke vores formelementer i listeposter til bedre struktur og organisation.

Password Verification
Username:
Password:
Register

Her er en forklaring på den kode, vi brugte:

• span elementer - disse vil blive brugt til visuel styling af vores input elementer (som du vil se senere i CSS)
• type="password" - Dette er en HTML5-attributt for formelementer. I understøttede browsere vil tegnene i dette felt blive erstattet af sorte prikker og dermed skjule den egentlige adgangskode på skærmen.

Her er hvad vi har indtil videre:

Trin 3: Adgangskode informationsboks HTML

Lad os nu tilføje HTML, der informerer brugeren om hvilke kompleksitetskrav der er opfyldt. Denne boks vil blive gemt som standard og vises kun, når feltet "adgangskode" 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 listeobjekt er givet en specifik ID-attributt. Disse id'er vil blive brugt til at målrette hvert kompleksitetskrav og vise brugeren, hvis kravet er opfyldt eller ej. Desuden vil hvert element blive formateret som "gyldigt", hvis brugerens adgangskode har opfyldt kravet eller ugyldigt, hvis de ikke har opfyldt det (hvis indtastningsfeltet er tomt, er ingen af ​​kravene opfyldt, hvorfor standardklassen " ugyldig”).

Her er hvad vi har indtil videre:

Trin 4: Opret baggrundsstil

Vi skal give vores sideelementer nogle grundlæggende styling. Her er et overblik over, hvad vi vil gøre i vores CSS:

• Tilføj en baggrundsfarve - Jeg brugte # EDF1F4
• Tilføj et baggrundsbillede med tekstur (oprettet i Photoshop)
• Opsæt vores skrifttypestabel - Vi bruger en god sans-serif skrifttypestabel
• Fjern / modificer nogle standardindstillinger for browseren

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;}

Trin 5: Opret baggrundsstil

Nu skal vi stille vores hovedbeholder og centrere den på siden. Vi bruger også nogle stilarter til vores 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 vigtigt at bemærke, at vi skal give vores H1-tag en grænseradius på de to øverste hjørner. Hvis vi ikke gør det, overlapper H1's baggrundsfarve de afrundede hjørner af det overordnede element (#container), og det ser sådan ud:

Tilføjelse border-radius til H1 elementet sikrer vores øverste hjørner vil forblive afrundet. Her er hvad vi har indtil videre:

Trin 6: CSS-stilarter til formularen

Lad os nu stilere vores forskellige formelementer, der starter med listelementerne inde i formularen:

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

Vi brugte :last-child vælger for at vælge det sidste element i listen (knap) og give det lidt ekstra afstand. (Bemærk denne vælger understøttes ikke i nogle gamle browsere). Næste, lad os stilere vores 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;

Bemærk, at vi har beregnet vores indgangselementets bredde ved at tage #containerbredden (400px) og trække marginerne, paddings og grænser, der er anvendt på indgangens overordnede elementer. Vi brugte også outline egenskab for at fjerne standardmetoderne for WebKit-fokus. Lad os endelig anvende nogle stilarter til vores andre formelementer:

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

Nu har vi noget der ser sådan ud:

Trin 7: Knap Styles

Nu skal vi style vores knapelement. Vi bruger nogle CSS3-stilarter, så brugere med nyere browsere får en bedre oplevelse. Hvis du leder efter en stor ressource, når du opretter baggrundsgradienter i CSS3, skal du tjekke ud Ultimativ 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;}

Trin 8: Password Information Box

Nu skal vi style den boks, der informerer brugere, hvis de opfylder adgangskravene. Først vil vi style det indeholdende element (#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;}

Lad os nu tilføje nogle stil til H4-elementet:

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

Endelig vil vi bruge CSS ::before vælger for at tilføje en "opadgående trekant". Dette er en geometrisk karakter, der kan indsættes ved hjælp af den tilsvarende UNICODE-enhed. Normalt i HTML ville du bruge tegnets HTML-enhed (▲). Men fordi vi tilføjer det i CSS, skal vi bruge UNICODE-værdien (25B2) forud for en tilbageslag.

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

Nu har vi dette:

Trin 9: Gyldige og ugyldige stater

Lad os tilføje nogle stilarter til vores krav. Hvis kravet er opfyldt, giver vi det en klasse af "gyldig". Hvis det ikke er opfyldt, vil det få en klasse "invalid" (standard klasse). Hvad angår ikonerne bruger jeg to 16 × 16 pixel ikoner 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 inkluderet JavaScript-funktionaliteten, der dynamisk ændrer "gyldige" og "ugyldige" klasser, vises alle krav som ugyldige (vi ændrer dette senere). Her er hvad vi har indtil videre:

Skjul boksen

Nu hvor vi har alt stiliseret præcis, hvordan vi vil have det, vil vi skjule adgangskodeinformationsboksen. Vi skifter det til synligheden for brugeren ved hjælp af JavaScript. Så lad os tilføje følgende regel:

#pswd_info {display:none;}

Trin 10: Tag fat i omfanget

Her er hvad vi vil opnå med vores script:

• Når adgangskodefeltet er valgt (: fokus), skal du vise det
• Hver gang brugeren skriver en ny karakter i adgangskodefeltet, skal du kontrollere og se, om det pågældende tegn opfylder et af følgende regler for adgangskompleksibilitet:
  • Mindst et bogstav
  • Mindst et stort bogstav
  • Mindst et nummer
  • Mindst otte tegn i længden
• Hvis det gør, markerer du den pågældende regel som "gyldig"
• Hvis det ikke gør det, skal du markere den regel som "ugyldig"
• Når adgangskodefeltet ikke er markeret (': blur'), ​​gem det

Trin 11: Få jQuery-opsætning

Først skal vi tilføje jQuery til vores side. Vi bruger den hostede version. Vi vil også linke til vores "script.js" -fil, hvor vi vil skrive den kode, der er nødvendig for vores adgangskode verifikationstest. Så tilføj følgende til din tag:

I vores "script.js" -fil begynder vi med nogle grundlæggende jQuery starter kode til vores script:

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

Trin 12: Opsætning af begivenhedsudløserne

I det væsentlige har vi tre arrangementer, vi vil lytte til:

1. "Keyup" på adgangskode indtastningsfeltet
(udløser når brugeren skubber en tast på tastaturet)
2. "Fokus" på adgangskode indtastningsfeltet
(udløser når adgangskodefeltet er valgt af brugeren)
3. "Blur" på adgangskode indtastningsfeltet
(udløses, når adgangskodefeltet ikke er markeret)

Som du kan se, er alle de hændelser, vi lytter efter, på feltet adgangskode. I dette eksempel vælger vi alle inputfelter, hvor typen er lig med adgangskoden. jQuery tillader os også at "kæde" disse begivenheder sammen, snarere end at skrive ud hver enkelt. Så, for eksempel, snarere end at 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 kæde alle begivenhederne 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 viden, lad os oprette vores kode, der vil vise eller skjule vores adgangskode informationsboks afhængigt af om adgangskode indtastningsfelt er valgt af brugeren eller ej:

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

Du vil nu bemærke at ved at klikke i feltet adgangskode indtastes adgangskodeinformationsboksen. Ligeledes vil adgangskodeinformationsboksen blive skjult ved at klikke uden for adgangskodeindsatsfeltet.

Trin 13: Kontrol af kompleksitetsreglerne

Alt, hvad vi skal gøre nu er, at scriptet kontrollerer værdien i adgangskodefeltet, hver gang et nyt tegn er indtastet (ved hjælp af 'keyup'-begivenheden). Så inde i $('input[type=password]').keyup funktion tilføjer vi følgende kode:

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

Dette opretter en variabel ved navn 'pswd', der gemmer den aktuelle adgangskodefeltværdi, hver gang der er en keyup-begivenhed. Vi vil bruge denne værdi til at kontrollere hver af vores kompleksitetsregler.

Validering af længden

Nu, inden for samme tastaturfunktion, lad os tilføje følgende:

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

Dette kontrollerer, om længden af ​​den nuværende adgangskodeværdi er mindre end 8 tegn. Hvis det er, bliver det en 'ugyldig' klasse. Hvis den er større end 8 tegn, får den en 'gyldig' klasse.

Validerer med regulære udtryk

Som du har set ovenfor, har vi blot en if / else-erklæring, der tester for at se om kompleksitetsbehovet er blevet opfyldt. Hvis kompleksitetskravet er opfyldt, giver vi det id i kodeordet en klasse af "gyldig". Hvis det ikke er opfyldt, bliver det en klasse af "ugyldig".

Resten af ​​vores krav vil kræve, at vi bruger regulære udtryk til at teste kompleksitetsreglerne. Så lad os tilføje følgende:

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

Her er en forklaring på de tre om / ellers udtalelser, vi brugte:

[Az]

Dette udtryk kontrollerer for at sikre, at mindst et bogstav fra A til Z (store bogstaver) eller en gennemgående z (små bogstaver) er indtastet

[AZ]

Dette udtryk kontrollerer for at sikre, at mindst en stor bogstav er indtastet

d

Dette vil kontrollere for eventuelle cifre 0 til 9

Trin 14: Test det ud

Det er alt der er til det! Du kan tilføje mere til dette, hvis du vil. Du kan tilføje flere kompleksitetsregler, du kan tilføje en indsendelsesmetode, eller du kan tilføje alt andet du anser for nødvendigt.