Hur man validerar ett formulär. Lägga till regler som ett JSON-objekt till metoden validate().


Senaste uppdateringen: 08.04.2016

Så vi har till vårt förfogande olika element, som vi kan använda på formuläret. Vi kan skriva in dem olika betydelser. Användare anger dock ofta värden som inte är helt korrekta: till exempel förväntas siffror anges, men användaren anger bokstäver etc. Och för att förhindra och kontrollera felaktig inmatning i HTML5 finns det en valideringsmekanism.

Fördelen med att använda validering i HTML5 är att användaren, efter felaktig inmatning, omedelbart kan få ett felmeddelande och göra lämpliga ändringar i den inmatade datan.

För att skapa validering för HTML5-formulärelement används ett antal attribut:

    krävs : Kräver att ett värde anges. För element textområde, välj, mata in (med typ text, lösenord, kryssruta, radio, fil, datetime-local, datum, månad, tid, vecka, nummer, e-post, url, sök, tel)

    min och max : minimum och max giltiga värden. För ett indataelement med typ datetime-local, date, month, time, week, number, range

    mönster : Anger ett mönster som indata måste matcha. För ett inmatningselement med skriv text, lösenord, e-post, url, sök, tel

obligatoriskt attribut

Det obligatoriska attributet kräver obligatorisk närvaro värden:

Validering i HTML5

Logga in:

Lösenord:

Om vi ​​inte anger några data i dessa fält, lämnar dem tomma och klickar på knappen Skicka, kommer webbläsaren att visa oss felmeddelanden och data kommer inte att skickas till servern:

Beroende på webbläsare kan meddelandeåtergivningen skilja sig något. Dessutom kan kanterna på ett felaktigt inmatningsfält färgas röda. Till exempel beteendet när du skickar tomma meddelanden i Firefox:

Attribut max och min

Använd attributen max och min för att begränsa intervallet för indatavärden:

Validering i HTML5

Ålder:

mönsterattribut

Mönsterattributet anger mönstret som data ska matcha. För att definiera en mall, språket för den så kallade . Låt oss titta på de enklaste exemplen:

Validering i HTML5

Telefon:

Här används det reguljära uttrycket \+\d-\d(3)-\d(3)-\d(4) för att ange telefonnumret. Det betyder att det första elementet i talet ska vara ett plustecken +. Uttrycket \d representerar valfri siffra från 0 till 9. Uttrycket \d(3) representerar tre på varandra följande siffror och \d(4) representerar fyra på varandra följande siffror. Det vill säga, detta uttryck kommer att motsvara ett telefonnummer i formatet "+1-234-567-8901".

Om vi ​​anger data som inte matchar detta mönster och klickar på skicka, kommer webbläsaren att visa ett felmeddelande:

Inaktiverar validering

Validering är inte alltid önskvärt; ibland behöver du inaktivera den. Och i det här fallet kan vi använda antingen novalidate-attributet på formelementet eller formnovalidate-attributet på submit-knappen:

Validering i HTML5

Telefon:

Formulärvalidering

Fälten i formuläret är utformade för att samla in information från sidans besökare. Men trots alla ansträngningar och förklaringar kan det vara svårt att få rätt information. Otåliga eller ouppmärksamma besökare kan hoppa över viktiga fält, fylla i ett eller flera fält ofullständigt eller helt enkelt trycka på fel tangenter. Efter att ha fyllt i formuläret på detta sätt klickar de på knappen "Skicka" och serverprogrammet får en uppsättning data som det inte vet vad det ska göra med (såvida inte datavalidering är implementerad på serversidan).

En seriös webbsida kräver dataverifiering, d.v.s. någon metod för att upptäcka fel i inmatade data, eller ännu bättre, en metod som inte tillåter fel alls. I flera år har webbutvecklare gjort detta med hjälp av JavaScript-rutiner egen utveckling eller genom professionella JavaScript-bibliotek. Och ärligt talat gav dessa tillvägagångssätt utmärkta resultat.

Men med tanke på hur validering görs överallt (nästan alla behöver kontrollera sina inmatningar för fel) och gäller endast ett fåtal grundläggande datatyper (t.ex. adresser E-post eller datum), och även att implementera det är en så ointressant och tråkig uppgift (ingen vill verkligen skriva samma kod för varje form, än mindre testa det), borde det definitivt finnas Det bästa sättet för dess genomförande.

Skaparna av HTML5 såg detta behov och uppfann ett sätt att få webbläsare att hjälpa genom att flytta verifieringsuppgiften från webbutvecklarnas axlar till webbläsare. Skaparna av HTML5 utvecklade ett valideringssystem på klientsidan som låter dig infoga grundläggande valideringsregler i vilket fält som helst. Det bästa med det här systemet är dess enkelhet och lätthet: allt du behöver göra är att infoga rätt attribut.

Hur fungerar HTML5-validering?

Grundtanken bakom HTML5-formulärvalidering är att utvecklaren anger vilken data som ska valideras, men inte implementerar alla arbetskrävande detaljer som krävs för att göra det. Detta är något som liknar en chef som bara ger order, men implementerar dessa instruktioner inte själv, utan med hjälp av sina underordnade.

Låt oss till exempel säga att ett visst fält inte kan lämnas tomt och besökaren måste ange åtminstone något i det. I HTML5 görs detta med det obligatoriska attributet i motsvarande fält (vi förfinar exemplet från föregående artikel ytterligare):

Även om det obligatoriska attributet tillämpas på ett fält, finns det ingen visuell standardindikation på detta krav. Därför bör du uppmärksamma användaren på detta krav med någon av dina visuella tecken, till exempel genom att markera fältramen med en färg och placera en asterisk bredvid den.

Validering utförs när användaren klickar på knappen för att skicka formuläret. Om webbläsaren stöder HTML5-formulär kommer den att märka att det obligatoriska fältet är tomt, avlyssna samtalet för att skicka formuläret och visa ett popup-felmeddelande:

Fastän officiella krav Det finns inget behov av att visa felmeddelanden under verifiering alla webbläsare använder verktygstips för detta ändamål. Tyvärr kan webbutvecklare inte ändra designen eller texten i detta meddelande (utan använder JavaScript), Förbi minst för närvarande.

En annan fråga uppstår: vad händer om flera valideringsregler överträds, till exempel flera obligatoriska fält inte fylls i?

Återigen kommer ingenting att hända förrän användaren klickar på knappen för att skicka formuläret. Först efter detta kommer webbläsaren att börja kontrollera fälten uppifrån och ned. När den stöter på det första felaktiga värdet stannar den ytterligare verifiering, avbryter formulärinlämningen och visar ett felmeddelande bredvid fältet som orsakade felet. (Dessutom, om området med felfältet försvinner från skärmen när du fyller i formuläret, rullar webbläsaren på skärmen så att felfältet är högst upp på sidan.) Efter att användaren korrigerat detta fel och trycker igen på knappen för att skicka formuläret, webbläsaren kommer att stanna vid nästa inmatningsfel och processen kommer att upprepas.

Inaktiverar verifiering

I vissa fall kan du behöva inaktivera kontrollen. Du vill till exempel testa din serverkod för att säkerställa att den behandlar inkommande felaktiga data korrekt. För att inaktivera validering för hela formuläret, lägg till novalidate-attributet till elementet:

Ett annat tillvägagångssätt är att inaktivera validering i formulärsändningsknappen. Denna metod är ibland användbar på en riktig webbsida. Till exempel, istället för att skicka, kanske du vill spara ett halvfyllt formulär för vidare användning. För att uppnå denna funktion infogas formnovalidate-attributet i elementet på motsvarande knapp:

Att upptäcka tomma fält är bara en av flera typer av validering. Vi kommer att titta på att upptäcka fel i olika typer av data senare.

Registrering av besiktningsresultat

Även om webbutvecklare inte kan utforma valideringsfelmeddelanden, kan de ändra utseende fält beroende på resultatet av deras validering. Du kan till exempel markera ett fält med ett felaktigt värde med en färgad bakgrund direkt när webbläsaren upptäcker felaktig data.

Allt som krävs är att lägga till några enkla CSS3-pseudoklasser. Följande alternativ är tillgängliga:

obligatoriskt och valfritt

Tillämpa formatering på ett fält beroende på om fältet använder det obligatoriska attributet eller inte;

giltigt och ogiltigt

Tillämpa formatering på ett fält baserat på giltigheten av det värde som angetts i det. Men kom ihåg att de flesta webbläsare inte validerar data förrän användaren försöker skicka formuläret, så fält med ogiltiga värden formateras inte direkt när det värdet skrivs in;

inom räckvidd och utanför räckvidd

Formatering för fält som använder ett min- eller max-attribut för att begränsa deras värde ett visst intervall värden.

Till exempel:

Indata:required:invalid (kant:1px fast röd;)

Validering med reguljära uttryck

Den mest kraftfulla (och mest komplexa) typen av validering som stöds av HTML5 är validering av reguljära uttryck. Eftersom JavaScript redan stöder vanliga uttryck, lägga till denna funktion till HTML-formulär vore ett helt logiskt steg.

Ett reguljärt uttryck är ett mönstermatchande mönster som är kodat enligt vissa syntaktiska regler. Reguljära uttryck används för att söka efter text efter strängar som matchar ett specifikt mönster. Du kan till exempel använda ett reguljärt uttryck för att kontrollera att ett postnummer innehåller rätt antal siffror, eller att en e-postadress har ett @-tecken och att dess domäntillägg innehåller minst två tecken. Ta till exempel följande uttryck:

{3}-{3}

Hakparenteserna i början av raden definierar intervallet av giltiga tecken. Med andra ord tillåter gruppen alla versaler från A till Ö. Nästa del in lockiga hängslen anger multiplikatorn, dvs. (3) betyder att tre versaler behövs. Nästa streck har nej speciell betydelse och betyder sig själv, d.v.s. anger att det ska finnas ett streck efter tre versaler. Slutligen står för siffror som sträcker sig från 0 till 9, och (3) kräver tre sådana siffror.

Reguljära uttryck är användbara för att söka text efter rader som matchar villkor som anges i uttrycket och kontrollera det specifik sträng matchar mönstret som anges av det reguljära uttrycket. HTML5-formulär använder reguljära uttryck för validering.

Symbolerna ^ respektive $ krävs inte för att indikera början och slutet av ett värde i ett fält. HTML5 antar automatiskt att dessa två tecken finns. Det betyder att värdet i fältet måste matcha det reguljära uttrycket exakt för att det ska anses giltigt.

Därför kommer följande värden att vara giltiga för detta reguljära uttryck:

QDR-001 WES-205 LOG-104

Men dessa är inte:

qdr-001 TTT-0259 5SD-000

Men reguljära uttryck blir väldigt snabbt mer komplexa än exemplet vi tittade på. Därför kan det vara en ganska tidskrävande uppgift att skapa rätt reguljära uttryck, vilket förklarar varför de flesta utvecklare föredrar att använda färdiga reguljära uttryck för att validera data på sina sidor.

För att använda det resulterande reguljära uttrycket på ett eller annat sätt för att kontrollera värdet på fältet eller, bör det läggas till det här elementet som värdet för mönsterattributet:

Reguljära uttryck verkar det idealiska botemedlet för att kontrollera e-postadressernas korrekthet. Men de verkar inte som det, men det är så det är. Men vänta lite medan du använder dem på det här sättet, för... HTML5 har redan en dedikerad typ för e-postadresser med ett reguljärt uttryck inbyggt i det (som kommer att behandlas i en framtida artikel).

Anpassad JavaScript-validering

HTML5-specifikationen anger också uppsättningen JavaScript-egenskaper, med vilken du kan bestämma fältvärdenas korrekthet (eller tvinga webbläsaren att utföra en kontroll).

Den mest användbara av dessa är metoden setCustomValidity(), som låter dig skriva ett anpassat skript för att validera specifika fält som fungerar med HTML5-valideringssystemet.

Detta görs enligt följande. Först och främst kontrolleras värdet på motsvarande fält för korrekthet. Detta görs med den normala oninput-händelsen:

I i detta exempel oninput-händelsen utlöser funktionen validateComments(). Det är utvecklarens ansvar att skriva den här funktionen, kontrollera fältets aktuella värde och anropa metoden setCustomValidity().

Om det finns problem med det aktuella värdet för ett fält ska ett felmeddelande skickas till det när metoden setCustomValidity() anropas. Om det aktuella värdet är giltigt, anropas denna metod med en tom sträng, vilket rensas särskilda meddelanden felmeddelanden som kan ha använts tidigare.

Funktion validateComments(input) ( if (input.value.length

Naturligtvis kan detta problem lösas mer elegant med hjälp av ett reguljärt uttryck som kräver lång sträng. Men medan reguljära uttryck är bra för att validera vissa typer av data, kan anpassad valideringslogik göra allt från komplexa algebraiska beräkningar till att kommunicera med en webbserver.

Stöd för webbläsarverifiering

Webbläsarutvecklare har lagt till valideringsstöd till sina produkter bitvis, vilket resulterar i att vissa webbläsarversioner stöder vissa valideringsfunktioner men inte andra. Tabellen nedan visar minsta webbläsarversioner som fullt ut stöder HTML5-validering:

Eftersom HTML5-validering inte ersätter validering på serversidan, kan det betraktas som en sekundär funktion där även sådant ofullkomligt stöd är bättre än inget stöd alls. I webbläsare som inte stöder validering, som IE 9, är det möjligt att skicka in formulär med felaktig data, men dessa fel kan fångas upp på serversidan och sidan returneras tillbaka till webbläsaren, men med de angivna felen.

Å andra sidan kan din webbplats innehålla komplexa formulär som är föremål för många datainmatningsfel, och du vill inte förlora de IE-användare som inte försöker en annan efter att ha misslyckats med att fylla i ditt formulär första gången . I det här fallet har du två alternativ: utveckla och använda ditt eget verifieringssystem eller använda JavaScript-bibliotek för att kompensera för IE mental retardation. Vilket av dessa två tillvägagångssätt att välja beror på granskningens omfattning och komplexitet.

Webforms2-biblioteket implementerar allt som diskuteras i det här ögonblicket attribut. För att använda ett bibliotek, ladda upp alla dess filer till din webbplatsmapp (eller ännu bättre, en underkatalog till din webbplatsmapp) och lägg till en länk till biblioteket på din webbsida.

Webforms2-biblioteket integreras väl med en annan JavaScript-patch som heter html5Widgets. Det ger stöd för de formulärfunktioner vi ska titta på härnäst, som skjutreglaget och datum- och färgväljare. Båda dessa bibliotek ger bra allmänt stöd för webbformulär, men innehåller oundvikliga luckor och mindre buggar i sin kod. Endast tiden kommer att utvisa kvaliteten på underhållet och förbättringen av dessa bibliotek.

Jag tror att många vet vad en form är: det är en uppsättning element som kan vara ett textfält (text), textområde (textområde), kryssrutor (kryssruta), alternativknappar/omkopplare (radio), rullgardinslistor ( alternativ), knappar (knapp, skicka). Dessa fält skickar data - namn/värde. Data bearbetas därefter på servern och resultatet returneras till användaren. Validering kontrollerar uppgifterna i ifyllda fält för att se överensstämmelse med någon mall.

Validering kan göras med html5, javascript/jQuery på klienten och även på servern. Alla fält måste ha ett "namn"-attribut. Inmatningsfält kan också ha ett "värde"-attribut. Om värdet är ifyllt kommer det att visas på sidan som standard. Inmatningsfält kan ramas in med taggar. Ansökan av denna tagg- är bra stil programmering. När den används visas inmatningsfältet med en titel när du klickar på det, vilket gör den givna ingången eller omkopplaren aktiv, och du kan även tilldela snabbtangenter. Det finns två alternativ att använda: det första alternativet är en för-länk som hänvisar till id för det önskade fältet, och det andra alternativet är att helt enkelt rama in inmatningsfältet: Namn eller Namn: Detta är ett textfält eller För fält med lösenordstyp, inmatade tecken visas med asterisker för säkerhets skull. För att ladda upp en fil, använd inmatningsfältet med type=”file” Fältet med en bockmarkering är Input type=”checkbox”. Om du markerar rutan kommer ett sådant fält att få attributet "markerad" - Input type = "radio", till skillnad från en kryssruta kan du bara välja ett värde. För att överföra värden som användaren inte behöver se, används dolda fält - Input type=”hidden”. Knapp för inlämning av formulär – Inmatningstyp=”skicka”. Värdevärdet kommer att visas på knappen, till exempel värde=”klicka på mig!”. Bara en knapp – Inmatningstyp=”knapp” eller klicka på mig-taggar. Fält för ett stort stycke text – Här är texten Fält för att välja ett värde från rullgardinsmenyn: Välj... Urval 1 Urval 2 Det valda attributet hjälper dig att ställa in det valda fältet som standard. Om du ställer in multipelattributet kan du välja flera värden: ...

HTML 5-ingång

Inmatningstyp=”datum” visar en kalender för val av datum. Inmatningstyp=”färg” visar en palett för att välja en färg. Ingångstyp=”intervall” visar ett skjutreglage för att välja ett värde från 0 till 100%. Nya attribut dök också upp: autoslutförande, platshållare, obligatoriskt, mönster och så vidare... En behållare för alla fält är form tagg. Dess möjliga parametrar är: Åtgärd - vart ska data skickas, Enctype - hur webbläsaren ska uppfatta den överförda datan, Metod - dataöverföringsmetoden GET (via url) eller POST (bakgrundsöverföring).

HTML 5-validering

HTML5-validering kommer att göras av webbläsaren själv baserat på fälttypen. Låt oss till exempel titta på formuläret och se typerna e-post , url , nummer , datum och tid :

  • E-post
  • Hemsida
  • Ålder
  • Datum Tid
    • skicka

    Naturligtvis är detta ett plus automatisk kontroll, en av nackdelarna är att äldre webbläsare inte stöder HTML5.

    Om du lägger till det obligatoriska attributet: måste detta fält fyllas i, annars visas en varning.

    Om du lägger till platshållarattributet kommer dess värde att visas i fältet som ett verktygstips, till exempel:

    Du kan kontrollera webbläsarstöd för en parameter på webbplatsen caniuse.com

    Du kan begränsa antalet angivna tecken med egenskapen maxlength, till exempel:

    Min/max-parametrarna begränsar de digitala värdena: . Denna begränsning kan också tilldelas datum:

    Multipelparametern låter dig välja flera filer med Input=”file” eller gör det möjligt att ange flera e-postmeddelanden i fältet Input=”email”.

    Du kan tillåta nedladdning av endast vissa filtyper genom att ange mime-typen, till exempel endast för PNG:

    Eller bara för vilka bilder som helst:

    För mp3 och video:

    Du kan också använda reguljära uttryck. Till exempel mönster:

    Fält för att endast ange ordet Hej: . Om du behöver göra det möjligt att ange Hej och hej, ändra då mönstret så här: pattern=”[Pn]hej”. Och så vidare. Fler exempel. Stora bokstäver: + Plus betyder en eller flera. Små bokstäver och versaler +

    Ett exempel på vad vi kan uppnå kan ses i exemplet nedan. Exemplet innebär också validering på korrekt inmatning mail - e-post. Nedan kommer jag att visa två alternativ för skript med och utan e-postvalidering.

    Som du kan se, tills alla fält är ifyllda, kommer skriptet inte att tillåta dig att skicka in formuläret, och rätt adress måste anges i e-postfältet. Först ska jag visa dig hur du gör enkel kontroll för att fält ska fyllas i utan att kontrollera din e-post. Tänk om ditt formulär inte har detta fält och du behöver bara kontrollera textfältet så att det inte är tomt och tomma meddelanden inte kommer till din e-post.

    För att genomföra vår plan måste vi först skapa själva formuläret. Du kanske redan har det, men om du vill introducera det här materialet i det måste du anpassa det till din form. Jag kommer att visa allt med mitt eget exempel. Mitt formulär kommer inte att skicka något, den här artikeln har ingen hanterare för att skicka brev, för att inte komplicera materialet. E-posthanteraren är en annan historia. Först HTML-koden för själva formuläret.

    Du kan se på koden att vårt formulär består av tre fält - namn, e-post och testfält. Det finns några fler viktiga punkter, som kommer att behövas i alla fall för korrekt drift manus. Låt oss ta det i ordning.

    • id="file_form" - ID för vårt formulär. ID krävs, det kommer också att användas i skriptet.
    • - obligatoriskt block. Detta är en behållare för att visa felmeddelanden från skriptet. detta block kan placeras utanför formuläret. Ge honom alla stilar. I exemplet är detta den röda texten som indikerar ett tomt fält.
    • onclick="frmotpr();" - en händelse som kommer att starta en funktion från vårt skript när knappen klickas. Den här tillställningen läggs till i knappen SÄND. Den näst sista raden i koden.
    • Alla fält är också tilldelade ID och klasser. De kommer också att behövas för vårt valideringsskript. ID för e-postfältet är särskilt viktigt för vårt framtida skript, som kommer att kontrollera korrektheten av den inmatade e-posten.

    Nu, för att ge vårt formulär ett normalt utseende, låt oss lägga till några CSS-stilar. Om du använder dem på din webbplats, lägg sedan till dem i din stilfil.

    #file_form( width:300px; bakgrund:#fff; padding:15px; margin:3px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; box-shadow:0 0 10px rgba(0,0,0,.1 border:1px solid #36c) -shadow:0 0 5px rgba(0,0,0,.2) infälld bakgrund:#fff; ) .in_pl:focus( bakgrund:#fff; ) #sub_f( padding:5px 15px; border:none; border - radius:25px; box-shadow:0 2px 1px rgba(0,0,0,.2 background:#36c) .fl_fr( width:100%; text-align:center; storlek:15px; färg:#333; markör: marginal: 10px; . bakgrund:rgba(255,0,0,.2);)

    Dessa stilar ställer in parametrar för själva formuläret, fälten och knapparna. Jag kommer inte att beskriva alla rader och vad var och en gör, det finns CSS-tutorials för det. Jag kommer bara att lista de två viktigaste.

    • #messenger är stilar för samma block med meddelandeutdata. Huvudparameter för denna klass är det display:none. Det vill säga att vi initialt gömmer blocket.
    • .notvalid är stilar för klassen som kommer att tilldelas av vårt skript till fältet som inte är ifyllt eller felaktigt ifyllt. Jag kommer att nämna denna klass igen nedan.

    Nu när vi har ett färdigt formulär eller du har konfigurerat ditt formulär enligt mina instruktioner, lagt till ID:n till det, mitt eller ditt, önskat block och knapphändelsen kan vi börja koppla ihop skriptet.

    Eftersom vårt manus fungerar med använder jQuery, måste den anslutas jQuery bibliotek. Om den inte är ansluten tidigare, gör det genom att lägga till denna rad:

    Du kan läsa var och hur man lägger till biblioteket korrekt i artikeln -.

    Efter biblioteket, inte före det, utan efter det, måste vi ansluta vårt efterlängtade formulärvalideringsskript. som jag skrev tidigare, skulle det första alternativet vara ett skript för att först kontrollera fältet för ifyllande, utan att kontrollera korrektheten av det inmatade e-postmeddelandet. Själva skriptet ser ut så här:
    

    2024 gtavrl.ru.