Många webbplatser som kräver inloggningsuppgifter måste upprätta en säkerhetsinställning som ofta kallas för komplexitetskrav för lösenord. Dessa krav säkerställer att användarlösenord är tillräckligt starka och inte lätt kan brytas.

Vad är ett starkt lösenord? Tja, det beror på vem du frågar. Traditionella faktorer som bidrar till lösenords styrka inkluderar emellertid längd, komplexitet och oförutsägbarhet. För att säkerställa lösenordsstyrka kräver många webbplatser användar lösenord för att vara alfanumerisk förutom att vara en viss längd.

I den här handledningen konstruerar vi ett formulär som ger användaren live feedback om huruvida deras lösenord har uppfyllt tillräckligt med komplexitetskraven vi ska etablera.

Innan vi börjar, låt oss ta en snygg topp på vilken vår slutprodukt kommer att se ut (klicka för en demo):

Observera: Syftet med denna handledning är att visa hur ett enkelt skript kan skrivas med javascript och jQuery för att upprätthålla krav på komplexitet för lösenord. Du kan lägga till ytterligare krav till skriptet om det behövs. Observera dock att formulärvalidering (server- och klientsidan), formulärinsändning och andra ämnen inte omfattas av detta exempel.

Steg 1: Startar HTML

Först vill vi få vår grundläggande HTML-startkod. Vi använder följande:

<-- Form HTML Here -->

Steg 2: Formulera HTML

Låt oss nu lägga till den markering som ska användas för vår blankett. Vi kommer att pakka in våra formulärelement i listobjekt för bättre struktur och organisation.

Password Verification
Username:
Password:
Register

Här är en förklaring av koden vi använde:

• span element - dessa kommer att användas för visuell styling av våra inmatningselement (som du kommer att se senare i CSS)
• type="password" - Det här är ett HTML5-attribut för formelement. I de stödda webbläsarna kommer tecknen i det här fältet att ersättas med svarta punkter vilket döljer själva lösenordet på skärmen.

Här är vad vi har hittills:

Steg 3: Lösenordsinformationslåda HTML

Låt oss nu lägga till HTML som informerar användaren om vilka komplexitetskrav som är uppfyllda. Den här rutan kommer att döljas som standard och visas bara när fältet "lösenord" är 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

Varje listobjekt ges ett specifikt ID-attribut. Dessa ID kommer att användas för att rikta varje komplexitetskrav och visa användaren om kravet är uppfyllt eller inte. Varje element kommer också att formateras som "giltigt" om användarens lösenord har uppfyllt kravet eller ogiltigt om de inte har uppfyllt det (om inmatningsfältet är tomt har inga krav uppfyllts, varför standardklassen " ogiltig").

Här är vad vi har hittills:

Steg 4: Skapa bakgrundsstil

Vi ska ge våra sidelement några grundläggande styling. Här är en översikt över vad vi ska göra i vår CSS:

• Lägg till en bakgrundsfärg - jag använde # EDF1F4
• Lägg till en bakgrundsbild med textur (skapad i Photoshop)
• Ställ in vår typsnittstapel - Vi använder en bra sans-serif-teckensnittsstapel
• Ta bort / ändra vissa standardinställningar för webbläsare

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

Steg 5: Skapa bakgrundsstil

Nu ska vi stile vår huvudbehållare och centrera den på sidan. Vi tillämpar också vissa stilar på vår H1-tagg.

#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 är viktigt att notera att vi måste ge vår H1-tag en gränsradie i sina två högsta hörn. Om vi ​​inte gör det, överlappar H1s bakgrundsfärg de avrundade hörnen till det ursprungliga elementet (#container) och det ser ut så här:

tillsats border-radius till H1-elementet garanterar att våra övre hörn kommer att vara rundade. Här är vad vi har hittills:

Steg 6: CSS-stilar för formuläret

Låt oss nu utforma våra olika formelement som börjar med listelementen i formuläret:

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

Vi använde :last-child väljaren för att välja det sista objektet i listan (knappen) och ge det lite extra avstånd. (Observera att denna väljare inte stöds i vissa äldre webbläsare). Låt oss sedan stilen vår input element:

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;

Observera att vi beräkna vårt inmatningselementets bredd genom att ta #container width (400px) och subtrahera marginaler, paddningar och gränser som tillämpas på ingångens överordnade element. Vi använde också outline egenskap för att ta bort standardmetoderna för WebKit-fokus. Till sist, låt oss tillämpa några stilar på våra andra formulärelement:

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

Nu har vi något som ser ut så här:

Steg 7: Knappformat

Nu ska vi utforma vårt knappelement. Vi använder några CSS3-stilar så att användare med nyare webbläsare får en bättre upplevelse. Om du letar efter en bra resurs när du skapar bakgrundsgradienter i CSS3, kolla in 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;}

Steg 8: Lösenords informationsfält

Nu ska vi utforma rutan som informerar användare om de uppfyller lösenordskraven. Först ska vi utforma det innehållande 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;}

Låt oss nu lägga till lite stil på H4-elementet:

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

Slutligen kommer vi att använda CSS ::before väljaren för att lägga till en "uppåtriktad triangel". Detta är en geometrisk karaktär som kan infogas med den motsvarande UNICODE-enheten. Normalt i HTML skulle du använda teckens HTML-enhet (▲). Men eftersom vi lägger till det i CSS måste vi använda UNICODE-värdet (25B2) föregås av en backslash.

#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 det här:

Steg 9: Giltiga och ogiltiga stater

Låt oss lägga till några stilar efter våra krav. Om kravet är uppfyllt, ger vi det en klass av "giltig". Om det inte har uppfyllts kommer det att bli en klass av "ogiltig" (standardklass). När det gäller ikonerna använder jag två 16 × 16 pixelikoner från 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;}

Eftersom vi inte har inkluderat JavaScript-funktionaliteten som dynamiskt ändrar "giltiga" och "ogiltiga" klasser, kommer alla krav att visas som ogiltiga (vi ändrar det senare). Här är vad vi har hittills:

Dölj rutan

Nu när vi har allt utformat exakt hur vi vill ha det, kommer vi att gömma lösenordsinformationsrutan. Vi byter sikt för användaren med hjälp av JavaScript. Så låt oss lägga till följande regel:

#pswd_info {display:none;}

Steg 10: Ta tag i omfattningen

Här är vad vi vill åstadkomma med vårt manus:

• När lösenordsfältet är valt (: fokus), visa det
• Varje gång användaren skriver ett nytt tecken i lösenordsfältet, kolla och se om det tecknet uppfyller någon av följande regler för komplexitet för lösenord:
  • Minst ett brev
  • Minst en stor bokstav
  • Åtminstone ett nummer
  • Minst åtta tecken i längd
• Om det gör, markera den här regeln som "giltig"
• Om det inte gör markerar du den här regeln som "ogiltig"
• När lösenordsfältet inte är valt (': oskärpa'), göm det

Steg 11: Komma igång med jQuery

Först måste vi lägga till jQuery på vår sida. Vi använder den värdversionen. Vi vill också länka till vår "script.js" -fil, där vi skriver den kod som behövs för vårt lösenordskontrolltest. Så lägg till följande till din märka:

I vår "script.js" -fil börjar vi med några grundläggande jQuery-startkod för vårt skript:

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

Steg 12: Ställa in händelseutlösare

I huvudsak har vi tre evenemang vi ska lyssna på:

1. "Keyup" i lösenordsinmatningsfältet
(utlöses när användaren trycker på en tangent på tangentbordet)
2. "Fokusera" på lösenordsinmatningsfältet
(triggar när lösenordsfältet väljs av användaren)
3. "Blur" i lösenordsinmatningsfältet
(utlöses när lösenordsfältet inte är valt)

Som du kan se är alla händelser vi lyssnar på i lösenordsinmatningsfältet. I det här exemplet väljer vi alla inmatningsfält där typen är lika med lösenordet. jQuery tillåter oss också att "kedja" dessa händelser tillsammans, i stället för att skriva ut var och en. Så, till exempel, snarare än att skriva detta:

$('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 kedja alla händelserna tillsammans och skriva följande:

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

Så med den kunskapen, låt oss skapa vår kod som visar eller döljer vår lösenordsinformationslåda beroende på om lösenordsinmatningsfältet är valt av användaren eller inte:

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

Du kommer nu att märka att genom att klicka i lösenordsinmatningsfältet kommer lösenordsinformationen att visas. På samma sätt, genom att klicka utanför lösenordsinmatningsfältet, kommer lösenordsinformationsrutan att döljas.

Steg 13: Kontrollera komplexitetsreglerna

Allt vi behöver göra nu är att skriptet kontrollerar värdet i lösenordsfältet varje gång ett nytt tecken anges (med hjälp av "keyup" -händelsen). Så, inuti $('input[type=password]').keyup funktion lägger vi till följande kod:

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

Detta ställer in en variabel som heter "pswd" som lagrar det aktuella lösenordsfältet varje gång det finns en nyckeluppgift. Vi kommer att använda det här värdet för att kontrollera alla våra komplexitetsregler.

Validerar längden

Nu, inom samma nyckelfunktion, lägger vi till följande:

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

Detta kontrollerar om längden på det aktuella lösenordet är mindre än 8 tecken. Om det är blir det en "ogiltig" klass. Om det är större än 8 tecken får det en "giltig" klass.

Validerar med reguljära uttryck

Som du såg ovan har vi helt enkelt ett if / else-uttalande som testar för att se om komplexitetskravet är uppfyllt. Om komplexitetskravet är uppfyllt, ger vi sitt ID i lösenordsrutan en klass av "giltig". Om det inte uppfylls får det en klass av "ogiltig".

Resten av våra krav kräver att vi använder reguljära uttryck för att testa komplexitetsreglerna. Så, låt oss lägga till följande:

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

Här är en förklaring av de tre om / annat uttalanden som vi använde:

[Az]

Detta uttryck kontrollerar att minst en bokstav A till Z (stor bokstav) eller en genom z (små bokstäver) har skrivits in

[AZ]

Detta uttryck kontrollerar att minst en stor bokstav har angivits

d

Detta kontrollerar alla siffror 0 till 9

Steg 14: Testa det

Det är allt det finns! Du kan lägga till mer om detta om du vill. Du kan lägga till mer komplexitetsregler, du kan lägga till en inlämningsmetod, eller du kan lägga till allt annat du anser nödvändigt.