Margir síður sem krefjast innskráningarleyfis fullnægja öryggisstillingum sem oft er nefnt kröfur um flókið lykilorð. Þessar kröfur tryggja að notendur lykilorð séu nægilega sterkar og ekki auðvelt að brjóta.

Hvað er sterk lykilorð? Jæja, það fer eftir því sem þú spyrð. Hins vegar eru hefðbundnar þættir sem stuðla að styrkleika lykilorðsins, lengd, flókið og ófyrirsjáanlegt. Til að tryggja lykilorðsstyrk þurfa mörg vefsvæði að nota lykilorð notenda til að vera algerlega auk þess að vera ákveðin lengd.

Í þessari einkatími munum við búa til eyðublað sem gefur notandanum lifandi athugasemdir um hvort lykilorð þeirra hafi nægilega uppfyllt kröfur um flókið sem við munum koma á fót.

Áður en við byrjum, þá skulum við taka að leika hámarki um hvað endanleg vara okkar mun líta út (smelltu til kynningar):

Vinsamlegast athugaðu: Tilgangur þessarar kennslu er að sýna hvernig einfalt handrit er hægt að skrifa með javascript og jQuery til að framfylgja kröfum um flókið lykilorð. Þú getur bætt viðbótarkröfum við handritið ef þörf krefur; Athugaðu þó að formgilding (miðlara- og viðskiptavinarhlið), skjalagerð og önnur atriði eru ekki fjallað í þessu dæmi.

Skref 1: Byrjunar HTML

Fyrst viljum við fá grunn HTML kóðann okkar. Við munum nota eftirfarandi:

<-- Form HTML Here -->

Skref 2: Form HTML

Nú skulum við bæta við merkinu sem verður notað fyrir formið okkar. Við munum vefja formþætti okkar í listatölum fyrir betri uppbyggingu og skipulagningu.

Password Verification
Username:
Password:
Register

Hér er útskýring á kóðanum sem við notuðum:

• span þættir - þetta verður notað til að stilla mynd af innsláttarþáttum okkar (eins og þú munt sjá seinna í CSS)
• type="password" - þetta er HTML5 eiginleiki fyrir formþætti. Í studdum vöfrum verða stafirnir í þessu sviði skipt út fyrir svarta punkta og fela þannig raunverulegt lykilorð á skjánum.

Hér er það sem við höfum fengið svo langt:

Skref 3: Lykilorðaskipan HTML

Nú skulum við bæta við HTML sem mun upplýsa notandann um hvaða kröfur um flókið eru uppfyllt. Þessi kassi verður falinn sjálfgefið og birtist aðeins þegar "lykilorð" reitinn er í brennidepli.

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 listatriði er gefið sérstakt auðkenni. Þessar auðkenni verða notaðar til að miða á hverja kröfu um flókið og sýna notanda hvort kröfan hafi verið uppfyllt eða ekki. Einnig verður hver þáttur stíllinn "giltur" ef lykilorð notandans hefur uppfyllt kröfuna eða ógilt ef þau hafa ekki uppfyllt það (ef innsláttarreitinn er tómur, hefur ekkert af kröfunum verið uppfyllt, þess vegna er sjálfgefið tegund " ógilt ").

Hér er það sem við höfum svo langt:

Skref 4: Búðu til bakgrunnsstíl

Við ætlum að gefa hliðarþáttum okkar nokkrar grunnstíll. Hér er yfirlit yfir það sem við munum gera í CSS okkar:

• Bættu við bakgrunnslit - ég notaði # EDF1F4
• Bættu við bakgrunnsmynd með áferð (búið til í Photoshop)
• Uppsetning leturstafla okkar - Við munum nota falleg sans-serif leturgerð
• Fjarlægja / breyta einhverjum stillingum vafrans

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

Skref 5: Búðu til bakgrunnsstíl

Nú munum við stilla aðalílátið okkar og miðja það á síðunni. Við munum einnig beita sumum stílum á H1-merkið okkar.

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

Það er mikilvægt að hafa í huga að við verðum að gefa H1-merkið landamærisradíus á efstu tveimur hornum. Ef við gerum ekki mun bakgrunnsliturinn H1 skarast á hringlaga hornum foreldrahlutans (#container) og það mun líta svona út:

Bætir við border-radius að H1 þátturinn tryggir að efstu horfin okkar verða áfram ávöl. Hér er það sem við höfum svo langt:

Skref 6: CSS stíl fyrir eyðublaðið

Nú skulum stíll okkar ýmsu formþættir byrja á listanum í forminu:

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

Við notuðum :last-child veljari til að velja síðasta hlutinn í listanum (hnappinn) og gefa henni auka bil. (Athugaðu að þetta val er ekki stutt í sumum vafra). Næst skulum við stilla okkar input þættir:

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;

Takið eftir því að við reiknuðum breidd inntakseiningar okkar með því að taka #hæðbreiddina (400px) og draga frá marmunum, púðum og landamærum sem sótt er um foreldraþætti inntaksins. Við notuðum einnig outline eign til að fjarlægja sjálfgefna WebKit fókus stíl. Loks skulum við beita nokkrum stílum við aðra myndaþætti okkar:

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

Nú höfum við eitthvað sem lítur svona út:

Skref 7: Hnappur Stíll

Nú erum við að fara að stilla hnappinn okkar. Við notum nokkrar CSS3 stíll þannig að notendur með nýrri vafra fá betri reynslu. Ef þú ert að leita að miklu úrræði þegar þú býrð til bakgrunnsstigsetningar í CSS3 skaltu skoða 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;}

Skref 8: Lykilorð Upplýsingar Box

Nú erum við að fara að stilla kassann sem upplýsir notendur ef þeir uppfylla lykilorðið. Í fyrsta lagi munum við stilla innihaldsefnið (#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;}

Nú skulum við bæta smá stíl við H4 frumefni:

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

Að lokum, við ætlum að nota CSS ::before veljari til að bæta við "uppljósandi þríhyrningi". Þetta er rúmfræðilegt staf sem hægt er að setja inn með því að nota samsvarandi UNICODE aðila. Venjulega í HTML sem þú vilt nota HTML eining eðli (▲). Hins vegar vegna þess að við erum að bæta því við í CSS, verðum við að nota UNICODE gildi (25B2) á undan með bakslagi.

#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ú höfum við þetta:

Skref 9: Gildir og ógildar ríki

Við skulum bæta við nokkrum stílum við kröfur okkar. Ef kröfan hefur verið uppfyllt munum við gefa það bekknum "gilt". Ef það hefur ekki verið uppfyllt mun það fá flokk af "ógildum" (sjálfgefið bekk). Eins og fyrir táknin, er ég að nota tvö 16 × 16 pixla tákn frá 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;}

Vegna þess að við höfum ekki innifalið JavaScript virkni sem breytir virkum "gilt" og "ógilt" bekkjum breytist allar kröfur sem ógildir (við munum breyta þessu seinna). Hér er það sem við höfum svo langt:

Fela kassann

Nú þegar við höfum allt sem er sniðið nákvæmlega hvernig við viljum það, ætlum við að fela lykilorðið. Við munum breyta sýnileika fyrir notandann með því að nota JavaScript. Svo skulum við bæta við eftirfarandi reglu:

#pswd_info {display:none;}

Skref 10: Gripaðu umfangið

Hér er það sem við viljum ná með handritinu okkar:

• Þegar lykilorðið er valið (: fókus) skaltu sýna það
• Í hvert skipti sem notandinn skrifar nýjan staf í lykilorðinu, athugaðu og athugaðu hvort þessi staf uppfyllir eitt af eftirfarandi reglum um flókið lykilorð:
  • Að minnsta kosti eitt bréf
  • Að minnsta kosti ein höfuðborg
  • Að minnsta kosti eitt númer
  • Að minnsta kosti átta stafir að lengd
• Ef það gerist skaltu merkja þessi regla sem "gilt"
• Ef það er ekki, merkið þá reglu sem "ógild"
• Þegar lykilorðið er ekki valið (': þoka') skaltu fela það

Skref 11: Getting jQuery skipulag

Í fyrsta lagi þurfum við að bæta jQuery við síðuna okkar. Við munum nota hýst útgáfa. Við viljum líka tengja við "script.js" skrá okkar, þar sem við munum skrifa kóðann sem þarf til að prófa lykilorðið okkar. Svo skaltu bæta við eftirfarandi við tag:

Í "script.js" skránni okkar munum við byrja með nokkrar undirstöðu jQuery byrjendakóða fyrir handritið okkar:

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

Skref 12: Stilla upp atburðartakka

Í meginatriðum höfum við þrjá viðburði sem við munum hlusta á:

1. "Keyup" á lykilorðinu innsláttarsvæðinu
(kallar þegar notandinn ýtir á lykil á lyklaborðinu)
2. "Focus" á lykilorðinu inntaksvettvangi
(kallar þegar lykilorðið er valið af notandanum)
3. "Óskýr" á lykilorðinu
(kallar þegar lykilorðið er ekki valið)

Eins og þú sérð eru öll viðburðin sem við erum að hlusta á á lykilorðinu. Í þessu dæmi munum við velja öll innsláttarsvið þar sem gerðin er jöfn lykilorðinu. jQuery leyfir okkur einnig að "keðja" þessi viðburði saman, frekar en að slá inn hvert og eitt. Svo, til dæmis, frekar en að slá þetta inn:

$('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ð getum keypt alla viðburði saman og sláðu inn eftirfarandi:

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

Svo með þessa þekkingu, skulum við búa til kóða okkar sem mun sýna eða fela lykilorð upplýsinga reitinn okkar eftir því hvort lykilorð inntak sviði er valinn af notanda eða ekki:

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

Þú munt nú taka eftir því að með því að smella á lykilorð innsláttarreitinn birtist lykilorð upplýsingaskipan. Sömuleiðis, með því að smella utan við lykilorð innsláttarreitinn, verður lykilorðið upplýsingaskilið falið.

Skref 13: Athuga reglur flókinnar

Allt sem við þurfum að gera núna er að hafa handritið að athuga gildi í lykilorðinu í hvert skipti sem ný stafur er sleginn inn (með því að nota 'takkann'). Svo inni í $('input[type=password]').keyup virka við munum bæta við eftirfarandi kóða:

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

Þetta setur upp breytu sem heitir 'pswd' sem geymir gildandi lykilorðsvirði í hvert skipti sem það er lykilatriði. Við munum nota þetta gildi í því að skoða hvert flókið reglur okkar.

Valið lengdina

Nú, inni í sömu lyklaborðsföllum, skulum við bæta við eftirfarandi:

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

Þetta stöðva til að sjá hvort lengd núverandi lykilorðs gildis er minni en 8 stafir. Ef það er, þá fær það 'ógilt' bekk. Ef það er stærra en 8 stafir, fær það 'gilt' bekk.

Staðfesta með reglulegum tjáningum

Eins og þú sást hér að framan, höfum við einfaldlega ef / annars yfirlýsingu sem prófanir til að sjá hvort kröfum um flókið hefur verið fullnægt. Ef kröfu um flókið er fullnægt, gefumst við kennitölu í lykilorðabókinni í flokki "gilt". Ef það er ekki uppfyllt fær það flokk af "ógildum".

Afgangurinn af kröfum okkar mun krefjast þess að við notum reglulegar segðir til að prófa reglur um flókið. Svo, við skulum bæta við eftirfarandi:

//validate letterif ( pswd.match(/[A-z]/) ) {$('#letter').removeClass('invalid').addClass('valid');}  Annar {$('#letter').removeClass('valid').addClass('invalid');}  / Gildir hástafabókstafur (pswd.match (/ [AZ] /)) {$('#capital').removeClass('invalid').addClass('valid');}  Annar {$('#capital').removeClass('valid').addClass('invalid');}  // sannreyna númerif (pswd.match (/  d /)) {$('#number').removeClass('invalid').addClass('valid');}  Annar {$('#number').removeClass('valid').addClass('invalid');}

Hér er útskýring á þremur ef / öðrum yfirlýsingum sem við notuðum:

[Az]

Þessi tjáning stýrir að ganga úr skugga um að amk eitt stafur A til Z (hástafi) eða í gegnum z (lágstafir) hafi verið slegið inn

[AZ]

Þessi tjáning stýrir til að tryggja að amk eitt hástafur hafi verið sleginn inn

d

Þetta mun fylgjast með öllum tölustöfum 0 til 9

Skref 14: Prófaðu það út

Það er allt sem þar er! Þú getur bætt við meira ef þú vilt. Þú gætir bætt við reglum um flóknari reglur, þú gætir bætt við uppgjöf, eða þú gætir bætt við því sem þú telur nauðsynlegt.