Du kan använda uppgifterna från formuläret ovan här.

Email.ForgotPass:

[[+fullständigt namn]],

För att aktivera ditt nya lösenord, besök följande länk:

Jag vill ha ett nytt lösenord

Om allt gick bra kommer du att kunna logga in på din profil med hjälp av följande data:

Logga in:[[+användarnamn]]

Lösenord:[[+lösenord]]

Tack,
Administration av sajten Exempel.Com

Allt är väldigt likt aktiveringsbokstavsbiten, bara lösenordet här genereras i utdraget.

Det sista steget är att skapa en resurs som användaren kommer att gå till från e-postmeddelandet för att uppdatera lösenordet. I den här resursen behöver vi ett samtal:

[[!ResetPassword:empty=`

Den här koden kommer att visa ett meddelande om någon plötsligt besöker den här sidan igen eller bara av misstag. Och om lösenordet har återställts, kommer ett meddelande att visas från chunken Auth.ForgotPass.Reset:

Nu har vi ett fullt fungerande användarbehörighets- och registreringssystem. Ändring av profilen för behöriga användare kommer att lämnas utanför ramen för denna artikel.

1. Skapa en registreringssida och lägg till ett utdragsanrop till den Registrera.

2. Skapa bitar med registreringsformuläret Registreringsformulär och aktiveringsbrev E-post.Aktivering.

3. Skapa en sida för registreringsbekräftelse och ring ett utdrag på den Bekräfta Registrera dig.

4. Lägg till ett utdragssamtal Logga in där vi vill placera inloggningsformuläret och det behöriga användarmärket.

5. Skapa en bit med inloggningsformuläret Auth.Login , bit med information om den auktoriserade användaren Auth.Logga ut , bit med felmeddelande Auth.Login.Error .

6. Skapa en sida för lösenordsåterställning och ring ett utdrag på den Glömt ditt lösenord.

7. Skapa en bit Auth.ForgotPass.Form med lösenordsåterställningsformulär, chunk Auth.ForgotPass.Send med ett meddelande om framgångsrikt skickande av brevet, chunk Email.ForgotPass med ett e-postmeddelande för återställning av lösenord.

8. Skapa en resurs med en sista lösenordsåterställning och placera ett kodavsnitt i den Återställ lösenord.

9. Skapa en bit Auth.ForgotPass.Reset med ett meddelande som indikerar att lösenordet har återställts.

Det är allt. Jag tar gärna emot tillägg och kommentarer.

När du bygger webbapplikationer är det viktigt att ta säkerheten på allvar, speciellt när du ska hantera att hämta data från användare.

En allmän säkerhetsregel är att inte lita på någon, så du kan inte lita på att användarna alltid anger rätt värden i formulär. Till exempel, istället för att ange rätt e-postadress i fältet, kan användaren ange en felaktig adress, eller till och med vissa skadliga uppgifter.

När det kommer till att validera användardata kan det göras antingen på klientsidan (i webbläsaren) eller på serversidan.

Tidigare kunde validering på klientsidan endast göras med JavaScript. Men allt har förändrats (eller nästan förändrats), eftersom med hjälp av HTML5 kan validering göras i webbläsaren, utan att behöva skriva komplexa valideringsskript i JavaScript.

Formulärvalidering med HTML5

HTML5 ger en ganska robust mekanism baserad på följande taggattribut : typ , mönster och kräver . Med dessa nya attribut kan du ladda ner en del av datavalideringsfunktionerna till webbläsaren.

Låt oss titta på dessa attribut för att förstå hur de kan hjälpa till med formulärvalidering.

typ attribut

Detta attribut talar om vilket inmatningsfält som ska visas för databehandling, till exempel det välbekanta fältet som

Vissa inmatningsfält tillhandahåller redan standardvalideringsmetoder, utan att behöva skriva ytterligare kod. Till exempel, kontrollerar fältet för att säkerställa att det angivna värdet matchar mallen för en giltig e-postadress. Om ett felaktigt tecken skrivs in i ett fält kan formuläret inte skickas in förrän värdet är rättat.

Testa att leka med e-postfältsvärdena i demon nedan.

Det finns även andra standardfälttyper, som , Och för validering av nummer, webbadresser respektive telefonnummer.

Obs! Telefonnummerformaten varierar från land till land på grund av skillnader i antal siffror i telefonnummer och skillnader i format. Som ett resultat definierar specifikationen inte en algoritm för att kontrollera telefonnummer, så i skrivande stund stöds den här funktionen dåligt av webbläsare.

Lyckligtvis för oss kan validering av telefonnummer göras med hjälp av mönsterattributet, som tar ett reguljärt uttryck som ett argument, vilket vi ska titta på härnäst.

mönsterattribut

Mönsterattributet kommer sannolikt att få många frontend-utvecklare att hoppa av glädje. Det här attributet accepterar ett reguljärt uttryck (liknande JavaScript-formatet för reguljära uttryck) som kommer att användas för att kontrollera riktigheten av data som anges i fältet.

Reguljära uttryck är ett språk som används för att tolka och manipulera text. De används ofta för komplexa sök- och ersättningsoperationer, såväl som för att kontrollera att inmatade data är korrekta.

Idag ingår reguljära uttryck i de flesta populära programmeringsspråken, såväl som i många skriptspråk, redigerare, applikationer, databaser och kommandoradsverktyg.

Reguljära uttryck (RegEX) är ett kraftfullt, kortfattat och flexibelt verktyg för att matcha en textsträng, till exempel enskilda tecken, ord eller teckenmönster.

Genom att skicka ett reguljärt uttryck som värdet för mönsterattributet kan du ange vilka värden som är acceptabla för ett givet inmatningsfält, samt informera användaren om fel.

Låt oss titta på ett par exempel på att använda reguljära uttryck för att validera värdet på inmatningsfält.

Telefonnummer

Som tidigare nämnts stöds inte fälttypen tel helt av webbläsare på grund av inkonsekvenser i telefonnummerformat i olika länder.

Till exempel, i vissa länder representeras formatet för telefonnummer som xxxx-xxx-xxxx , och själva telefonnumret blir ungefär så här: 0803-555-8205 .

Det reguljära uttrycket som detta mönster matchar är: ^\d(4)-\d(3)-\d(4)$ . I kod kan detta skrivas så här:

Telefonnummer:

Alfanumeriska värden

obligatoriskt attribut

Detta är ett booleskt attribut som används för att indikera att värdet på ett givet fält måste fyllas i för att formuläret ska kunna skickas. När du lägger till detta attribut i ett fält kommer webbläsaren att kräva att användaren fyller i detta fält innan formuläret skickas.

Detta räddar oss från att implementera fältvalidering med JavaScript, vilket kan spara tid för utvecklare.

Till exempel: eller (för XHTML-kompatibilitet)

Alla demos du har sett ovan använder det obligatoriska attributet, så du kan prova det genom att försöka skicka in formuläret utan att fylla i några fält.

Slutsats

Webbläsarstöd för formulärvalidering är ganska bra, och för äldre webbläsare kan du använda polyfills.

Det är värt att notera att det är farligt att bara förlita sig på webbläsarsidans validering, eftersom dessa kontroller lätt kan kringgås av angripare eller botar.

Alla webbläsare stöder inte HTML5, och inte all data som skickas till ditt skript kommer från ditt formulär. Detta innebär att innan du slutligen accepterar data från användaren är det nödvändigt att kontrollera dess korrekthet på serversidan.

"Fool protection" är en uppsättning åtgärder för att förhindra att felaktig information matas in i ett formulär. Om du till exempel behöver ange ett positivt tal från 0 till 10 i ett fält bör du kontrollera att användaren inte skriver in text eller ett tal som inte ligger inom det angivna intervallet, d.v.s. talet bör inte vara mindre än noll och mer än tio.

Varför läggs felaktig information in? Detta görs huvudsakligen av tre skäl.

1. Användaren gjorde av misstag ett misstag, till exempel läste han ouppmärksamt vad han var tvungen att ange.
2. Webbsidan frågar efter data på ett tvetydigt sätt, vilket låter användaren gissa och gissa vad de verkligen vill ha. Men åsikterna från utvecklaren och användaren sammanfaller inte alltid.
3. Det finns ett antal personer som uppfattar instruktioner som en utmaning och försöker göra tvärtom. Sådana användare resonerar ungefär så här: "Ja, de ber mig att ange ett nummer. Vad händer om jag anger bokstäverna?” Sedan frågar de uppenbart felaktig information och ser vad det leder till.

Det bör förstås att exakt och korrekt formulering, även om den minskar sannolikheten för fel, inte på något sätt räddar dig från dem. Endast tekniska medel på serversidan gör att du kan få önskat resultat och undvika att ange felaktig information. Revision eller, som det också kallas, validering på klientsidan gör det möjligt för dig att snabbt kontrollera uppgifterna som användaren har angett för korrekthet, utan att skicka formuläret till servern. Detta sparar användaren tid och minskar belastningen på servern. Ur användbarhetssynpunkt finns det också fördelar - användaren får omedelbart ett meddelande om vilken information han angett felaktigt och kan rätta till sitt misstag.

Obligatoriskt fält

Vissa formulärfält måste fyllas i innan de skickas till servern. Det gäller till exempel registreringsformuläret där du måste ange inloggning och lösenord. För att ange obligatoriska fält, använd det obligatoriska attributet, som visas i exempel 1.

Exempel 1. Det obligatoriska attributet

HTML5 IE 10+ Cr Op Sa Fx

Obligatoriska fält måste fyllas i innan formuläret skickas, annars skickas formuläret inte till servern och webbläsaren kommer att varna om detta. Typen av meddelande beror på webbläsaren, till exempel visar Chrome ett verktygstips som visas i fig. 1.

Ris. 1. Obligatoriskt fält är inte ifyllt

Data korrekthet

Inledningsvis finns det två fält där användarinmatning kontrolleras automatiskt. Detta är en webbadress och en e-postadress. Chrome kontrollerar också kalenderfältet för giltighet, men bara för att det inte har ett klicka-till-kalender-gränssnitt. Följande regler gäller för dessa element.

• Webbadress ( ) måste innehålla protokollet (http://, https://, ftp://).
• E-postadress ( ) måste innehålla bokstäver eller siffror före @-symbolen, efter den, sedan en punkt och en förstanivådomän.

Webbläsare har lite olika policyer för att verifiera användardata. Opera infogar till exempel automatiskt http://-protokollet framför den inmatade texten, medan andra webbläsare väntar på det från användaren. Chrome och Opera kräver en punkt i e-postadressen, Firefox kräver det inte.

Exempel 2 visar ett formulär med obligatoriska fält där två fält valideras av webbläsaren.

Exempel 2: Datakorrekthet

HTML5 IE 10+ Cr Op Sa Fx

Opera kontrollerar bara ett formulärelement om det har ett namnattribut.

Vad som händer i Opera när du anger felaktig data visas i Fig. 2.

Ris. 2. Varning för felaktiga uppgifter

Inmatningsmall

Vissa data kan inte klassificeras i någon av formulärelementtyperna, så du måste använda ett textfält för det. Samtidigt läggs de in enligt en viss standard. Således innehåller en IP-adress fyra siffror separerade med en punkt (192.168.0.1), Rysslands postnummer är begränsat till sex siffror (124007), ett telefonnummer innehåller ett riktnummer och ett specifikt antal siffror, ofta separerade med en bindestreck (391 555-341-42), etc. Webbläsaren behöver ange en inmatningsmall så att den kontrollerar de data som användaren matat in enligt den. För att göra detta används mönsterattributet, och dess värde är ett reguljärt uttryck. Vissa typiska värden är listade i tabellen. 1.

Exempel 3 ber dig att ange ett hexadecimalt färgvärde (#ffcc00) och om det inte är inom detta intervall visar webbläsaren ett felmeddelande.

Exempel 3. Inmatningsmall

HTML5 IE 10+ Cr Op Sa Fx

I fig. Figur 3 visar en varning i webbläsaren Chrome.

Ris. 3. De angivna uppgifterna stämmer inte överens med mallen

Ogiltigförklaring

Validering krävs inte alltid för ett formulär, till exempel kommer en utvecklare att vilja använda en universell JavaScript-lösning och behöver inte längre en dubblettkontroll av webbläsaren. I sådana fall måste du inaktivera inbyggd validering. För att göra detta, använd novalidate-attributet för taggen

För liknande ändamål används attributet formnovalidate, som läggs till knappen för att skicka formuläret, i detta fall till taggen . I det här fallet kommer formuläret från exempel 4 att se ut så här.