Ndërtimi i një formulari të thjeshtë kontakti me Angularjs dhe php. Siguria e të dhënave të përdoruesit Pse u instalua ky formular?

Këtu mund të përdorni të dhënat nga formulari i mësipërm.

Email.ForgotPass:

[[+ emri i plotë]],

Për të aktivizuar fjalëkalimin tuaj të ri, ju lutemi vizitoni lidhjen e mëposhtme:

Unë dua një fjalëkalim të ri

Nëse gjithçka shkoi mirë, do të jeni në gjendje të hyni në profilin tuaj me informacionin e mëposhtëm:

Identifikohu:[[+ emri i përdoruesit]]

Fjalëkalimi:[[+ fjalëkalim]]

Faleminderit,
Shembull i Administrimit të Faqes.Com

Gjithçka është shumë e ngjashme me pjesën e letrës së aktivizimit, këtu në fragment krijohet vetëm fjalëkalimi.

Prekja e fundit mbetet për të krijuar një burim në të cilin përdoruesi do të shkojë nga letra për të përditësuar fjalëkalimin. Në këtë burim, na duhet një telefonatë:

[[! Rivendos fjalëkalimin: bosh = `

Ky kod do të shfaqë një mesazh nëse papritmas dikush endet përsëri në këtë faqe ose thjesht rastësisht. Dhe nëse fjalëkalimi rivendoset me sukses, do të shfaqet një mesazh nga pjesa Auth.ForgotPass.Rivendos:

Tani kemi një sistem plotësisht funksional të autorizimit dhe regjistrimit të përdoruesve. Ndryshimi i profilit të përdoruesve të autorizuar do të lihet jashtë objektit të artikullit.

1. Krijoni një faqe regjistrimi dhe shtoni një thirrje në të Regjistrohu.

2. Krijo copa me një formular regjistrimi Regjistrohu.Formulari dhe letrën e aktivizimit Email.Aktivizimi.

3. Krijoni një faqe konfirmimi të regjistrimit dhe vendosni një telefonatë fragment në të Konfirmo Regjistrohu.

4. Shto një telefonatë fragment Identifikohu ku duam të vendosim formularin e hyrjes dhe distinktivin e përdoruesit të autorizuar.

5. Krijo një copë me një formular identifikimi Auth.Identifikohu , copë me informacione rreth përdoruesit të autorizuar Auth.Dalje , copë me mesazh gabimi Auth.Login.Gabim .

6. Krijoni një faqe rikuperimi të fjalëkalimit dhe vendosni një telefonatë të fragmentit në të Keni harruar fjalëkalimin.

7. Krijo një copë Auth.ForgotPass.Form me një formular të rikuperimit të fjalëkalimit, copë Auth.ForgotPass.Dërguar me një mesazh për dërgimin me sukses të letrës, copë Email.ForgotPass me një letër për të rivendosur fjalëkalimin.

8. Krijoni një burim me një rivendosje përfundimtare të fjalëkalimit dhe vendosni një thirrje në të Rivendosni fjalëkalimin.

9. Krijo një copë Auth.ForgotPass.Rivendos me një mesazh për rivendosjen e suksesshme të fjalëkalimit.

Kjo eshte e gjitha. Do të jem i lumtur për çdo shtesë dhe koment.

I pagabueshëm është një grup masash për të parandaluar futjen e informacionit të pasaktë në një formular. Për shembull, nëse duhet të futni një numër pozitiv nga 0 në 10 në një fushë, atëherë duhet të kontrolloni që përdoruesi të mos futë tekst ose një numër që nuk shtrihet në intervalin e specifikuar, d.m.th. numri nuk duhet të jetë më i vogël se zero ose më shumë se dhjetë.

Pse futen informacione të pasakta? Kjo është kryesisht për shkak të tre arsyeve.

1. Përdoruesi bëri një gabim rastësisht, për shembull, lexoi pa vëmendje atë që duhet të tregojë.
2. Në një faqe në internet, atyre u kërkohet në mënyrë të paqartë të fusin të dhëna, kështu që përdoruesi duhet të hamendësojë dhe të bëjë një supozim se çfarë duan me të vërtetë prej tij. Në këtë rast, pikëpamjet e zhvilluesit dhe përdoruesit nuk përkojnë gjithmonë.
3. Ka një numër njerëzish që i marrin udhëzimet si sfidë dhe përpiqen të bëjnë të kundërtën. Përdorues të tillë arsyetojnë kështu: “Po, më kërkohet të fus një numër. Çfarë ndodh nëse tregoj shkronjat? " Pas kësaj, ata kërkojnë informacion dukshëm të pasaktë dhe shohin se çfarë do të çojë.

Duhet kuptuar që formulimet e sakta dhe korrekte, megjithëse zvogëlojnë gjasat e gabimeve, në asnjë mënyrë nuk ju shpëtojnë prej tyre. Vetëm mjetet teknike në anën e serverit ju lejojnë të merrni rezultatin e dëshiruar dhe të shmangni futjen e informacionit të pasaktë. Sidoqoftë, rishikimi ose, siç quhet edhe ai, vlefshmëria nga ana e klientit ju lejon të kontrolloni shpejt të dhënat e futura nga përdoruesi për korrektësi, pa e dorëzuar formularin në server. Kjo kursen kohën e përdoruesit dhe zvogëlon ngarkesën në server. Nga pikëpamja e përdorshmërisë, ka edhe pluse - përdoruesi menjëherë merr një mesazh se çfarë informacioni ka treguar gabimisht dhe mund të korrigjojë gabimin e tij.

Fusha e kërkuar

Disa fusha formulari duhet të plotësohen përpara se t'i dërgoni në server. Kjo, për shembull, vlen për formularin e regjistrimit, ku ju kërkohet të vendosni një emër përdoruesi dhe fjalëkalim. Atributi i kërkuar përdoret për të specifikuar fushat e kërkuara, siç tregohet në Shembullin 1.

Shembull 1. Atributi i kërkuar

HTML5 IE 10+ Cr Op Sa Fx

Fushat e kërkuara duhet të plotësohen përpara se të dërgoni formularin, përndryshe formulari nuk do të dërgohet në server dhe shfletuesi do të lëshojë një paralajmërim për këtë. Lloji i mesazhit varet nga shfletuesi; për shembull, Chrome shfaq një këshillë veglash, siç tregohet në Fig. 1.

Oriz. 1. Fusha e kërkuar nuk është e plotësuar

Korrektësia e të dhënave

Fillimisht, ekzistojnë dy fusha në të cilat të dhënat e futura nga përdoruesi kontrollohen automatikisht. Kjo është adresa e internetit dhe adresa e emailit. Shfletuesi Chrome kontrollon gjithashtu fushën e të dhënave të kalendarit për vlefshmëri, por vetëm sepse nuk ka një ndërfaqe kalendarike klikoni për të zgjedhur. Këto elemente karakterizohen nga rregullat e mëposhtme.

• Faqe interneti ( ) duhet të përmbajë protokollin (http: //, https: //, ftp: //).
• Adresa e emailit ( ) duhet të përmbajë shkronja ose numra përpara simbolit @, pas tij, pastaj një pikë dhe një domen të nivelit të parë.

Shfletuesit kanë politika paksa të ndryshme për vërtetimin e të dhënave të përdoruesit. Për shembull, Opera zëvendëson automatikisht protokollin http: // përpara tekstit të futur, ndërsa shfletuesit e tjerë e presin atë nga përdoruesi. Chrome dhe Opera kërkojnë që një pikë të jetë në adresën e postës, është opsionale për Firefox-in.

Shembulli 2 tregon një formë me fushat e kërkuara në të cilën dy fusha janë të vërtetuara nga shfletuesi.

Shembulli 2. Korrektësia e të dhënave

HTML5 IE 10+ Cr Op Sa Fx

Opera vërteton një element formular vetëm nëse atributi emri është i pranishëm.

Çfarë ndodh në Opera kur futni të dhëna të pasakta tregohet në Fig. 2.

Oriz. 2. Paralajmërim për të dhëna të pasakta

Modeli i hyrjes

Disa të dhëna nuk mund të kategorizohen si një lloj elementi i formës, kështu që ju duhet të përdorni një kuti teksti për të. Për më tepër, futja e tyre bëhet sipas një standardi të caktuar. Pra, adresa IP përmban katër numra të ndarë me një pikë (192.168.0.1), kodi postar i Rusisë është i kufizuar në gjashtë shifra (124007), telefoni përmban një kod qyteti dhe një numër specifik shifrash të ndara shpesh me vizë ( 391 555-341-42), etj. Shfletuesi duhet të specifikojë një shabllon të hyrjes në mënyrë që të vërtetojë hyrjen e përdoruesit sipas tij. Për këtë, përdoret atributi model, dhe vlera e tij është një shprehje e rregullt. Disa vlera tipike janë renditur në tabelë. 1.

Shembulli 3 kërkon një vlerë heksadecimal ngjyrash (# ffcc00) dhe nëse nuk është në këtë interval, shfletuesi shfaq një mesazh gabimi.

Shembulli 3. Modeli hyrës

HTML5 IE 10+ Cr Op Sa Fx

Në fig. 3 tregon një paralajmërim në shfletuesin Chrome.

Oriz. 3. Të dhënat e futura nuk përputhen me shabllonin

Anulimi i vlefshmërisë

Verifikimi nuk kërkohet gjithmonë për një formular, për shembull, një zhvillues dëshiron të përdorë një zgjidhje universale në JavaScript dhe ai nuk ka nevojë për vërtetim të dyfishtë nga shfletuesi. Në raste të tilla, duhet të çaktivizoni vërtetimin inline. Për këtë, aplikohet atributi novalidate i etiketës.

Për një qëllim të ngjashëm, përdoret atributi formnovalidate, i cili shtohet në butonin për dërgimin e formularit, në këtë rast në etiketë ... Në këtë rast, forma nga shembulli 4 do të duket kështu.

Për çdo zhvillues të uebit, nuk ka ende problem më serioz sesa pajtueshmëria e plotë e produktit të tij me ndërshfletues. Ndoshta, kjo është një nga detyrat kryesore të një specialisti të mirë: të sigurojë që faqja e tij të shfaqet gjithmonë saktë në të gjithë shfletuesit.

Parametri kërkohet e cila ndonjëherë përdoret për hyrje nuk funksionon në IE të lashtë, e cila thjesht nuk mund të lihet në atë mënyrë. Përdoruesit në pension që ende përdorin IE6 duhet të jenë po aq të lehtë në faqen tuaj sa përdoruesit e versionit më të fundit të Google Chrome. Kush përveç zhvilluesve të uebit mund të kujdeset për ta.

Rreth e dhimbshme, për Internet Explorer

Për shfletuesit normalë si Firefox, Opera dhe Google Chrome, kjo detyrë është relativisht e lehtë. Edhe versionet më të vjetra të këtyre shfletuesve e japin kodin html po aq mirë, përveç nëse sigurisht që përdoret ndonjë teknologji e re në të. Por për ta arritur këtë në shfletuesit e familjes Internet Explorer, duhet një përpjekje e madhe.

Çdo version i shfletuesit Internet Exlorer ka marrëzinë e tij unike. Ajo që funksionon në IE6 mund të mos funksionojë siç duhet në IE7 dhe anasjelltas. Ky kopsht zoologjik i Microsoft-it nuk ka mundur ta kapërcejë as në versionin më të fundit të shfletuesit të tij.

Nuk mund ta kuptoj pse zhvilluesit e shfletuesit nuk mund të hapin dhe lexojnë standardet e W3C për ndërtimin e faqeve.

Prandaj, si një zhvillues ueb, më duhet të veproj si një lloj "shtrese" midis shfletuesve kapriçioz dhe vizitorëve të faqes që kërkojnë njohuri dhe spektakle. Dhe është e mrekullueshme që zhvilluesit e uebit kanë pasur sukses deri më tani.

Pra, si ju kërkohet të punoni në versionet më të vjetra të IE?

JS na vjen në shpëtim. Më parë, nuk mund ta duroja, por tani nuk shoh një rrugë tjetër pa të në pafundësinë e WEB-it "korrekt".

Zgjidhjen më poshtë nuk e shpika unë, por e mora nga një blog borgjez. Meqenëse jam i pangopur dhe blogu është borgjez, nuk do të lidhem me të.

Funksioni do të jetë përgjegjës për gjithçka. fnCheckFields ()... Vendosni kodin JS në faqen tuaj të internetit:

Zakonisht rekomandohet vendosja e tij midis etiketave html KOKË në fillim të faqes, por gjithsesi do të rekomandoja vendosjen e saj në fund të faqes përpara etiketës mbyllëse TRUPI... Kështu, JS ka më pak ndikim në shpejtësinë e ngarkimit të faqes.

Dritarja e hyrjes, ku duhet të futet parametri i kërkuar, duhet të duket kështu në gjuhën html:

Ky skenar funksionon shumë thjesht: pasi të klikoni butonin dërgoni, skripti kontrollon të gjitha hyrjet për praninë e parametrit të kërkuar dhe nëse e gjen atë, atëherë shikon vlerën e futur të kësaj fushe në përputhje me rrethanat. Nëse asgjë nuk është futur në një hyrje të tillë, atëherë shfaqet një dritare paralajmëruese për nevojën për të dhëna. Prandaj, të dhënat nuk dërgohen askund.

Është gjithashtu e jashtëzakonshme që nëse keni një shfletues normal që tashmë ka mësuar ta kuptojë këtë parametër siç pritej, një dritare e tillë paralajmëruese nuk do të shfaqet dhe mjetet standarde për përpunimin e parametrit të kërkuar për shfletuesin tuaj do të funksionojnë.

Shpërndaje në rrjetet sociale rrjeteve