Låt oss anta att vi har ett litet formulär som består av två ingångar (text och lösenord), ett textområde och en skicka-knapp. Vår uppgift är att kontrollera att de två första inmatnings- och textområdena är tomma omedelbart innan formuläret skickas. Om det inte finns några tomma fält ska formuläret skickas in. Om det finns tomma fält måste du omge dem med en röd ram, visa ett meddelande i form av en varning om att alla fält måste fyllas i och sedan inaktivera att skicka in formuläret. När användaren har tagit bort varningen bör färgen på fältramen återgå till sitt ursprungliga tillstånd. Webbplatsen för Zheka Nesmelov hjälper dig att vackert designa själva formuläret.
För att allt ska fungera som det ska kommer vi att binda värdet som returneras av send()-funktionen till onsubmit-händelsen i formuläret. Denna funktion returnerar sant eller falskt beroende på om alla fält är ifyllda. Om falskt returneras kommer formuläret inte att skickas när du klickar på knappen, om det är sant kommer formuläret att skickas. Observera att vi inte ger fälten ett id (detta skulle göra dem mycket lättare att koppla igenom JavaScript DOM).
Kontrollera ifyllandet av formulärfält i JavaScriptLåt oss nu gå vidare till JavaScript-koden. Det kommer att finnas två funktioner här. Den första send()-funktionen gör själva kontrollen. Med värdet på den giltiga variabeln förstår vi om alla fält är ifyllda efter att kontrollen är klar. I elems placerar vi alla element i den första formen (index = 0) i vårt dokument. Istället för 0 kan du använda till exempel namnet på formuläret som en sträng (om det är angivet). Nästa i slingan går vi igenom alla element i detta formulär, samtidigt som vi kontrollerar om det aktuella elementet är textområde eller inmatning med typ = text || Lösenord. Kontrollera i så fall värde värde av detta element. När allt kommer omkring kommer värdet att innehålla den text som användaren skrivit in. Om värde = till en tom sträng, tilldela sedan elementets gräns röd färg och ställ in den giltiga variabeln till false. I slutet, efter att ha passerat alla element, kontrollerar vi giltigt. Om det är falskt visar vi en varning, inaktiverar formulärinlämning och markerar i rött endast de fält som inte är ifyllda. I annat skicka formuläret.
Den andra funktionen i JavaScript-koden kommer att exekveras omedelbart efter att dokumentet har laddats. När du för muspekaren över formuläret (händelsen onmouseover), kommer loopen att börja iterera genom alla dess element. Om något av elementen har CSS-egenskapsgränsen = "2px solid red", tilldelas det standardvärdet (den röda färgen tas bort).
Det är allt. Allt som återstår är att dekorera din form vackert!
Lämna en kommentar, klicka på "Gilla" ("Gilla") och "Spara", så skriver jag något annat intressant för dig :)
Vi har alla fyllt i formulär någon gång. Vissa bearbetade till och med resultaten de samlade in, vare sig det var beställningar i en webbutik eller returtjänst. När vi ber användaren att fylla i viss information vill vi att den ska överensstämma med ett visst format, speciellt om den senare bearbetas av ett CMS som 1C bitrix, WorldPress, och så vidare. När allt kommer omkring, om i telefonkolumnen användaren av någon anledning skriver ner sin Skype-inloggning, kan ett databearbetningsfel uppstå: det kommer inte att registreras och användaren skickas tillbaka till sidan för ifyllning av formulär. Följaktligen uppstår frågan om hur man kontrollerar de inmatade uppgifterna online och förhindrar att felaktiga uppgifter skickas.
Arbetet med den beskrivna lösningen, utvecklad av oss, kan omedelbart utvärderas med hjälp av exemplet på beställningsproceduren på Newcoms webbplats. Nedan kommer vi att börja en berättelse om processen för dess utveckling, samt ge några fler exempel.
Formulering av problemetAtt göra en enkel javascript-kontroll av formulärfält innan du skickar det till servern tar ett par minuter. Först när du skriver denna enkla sak för tionde gången för bara en sida, tänker du ofrivilligt på att automatisera denna process. Vid något tillfälle blev tankarna om detta så besatta att jag var tvungen att sätta mig ner och skapa ett miniatyrbibliotek som tog upp fälten.
Om du delar upp problemet i block får du något i stil med följande diagram: 
Tja, om det finns ett system, låt oss implementera det.
Vilka fält är vanligast på formulär?
- Textinmatningar, som i regel kontrolleras antingen helt enkelt för fullständighet eller för enkla reguljära uttryck som e-post eller telefon.
- Kryssrutor markerade för förekomsten av ett märke (som ett avtal för behandling av personuppgifter).
- Vi kan också nämna rullgardinslistor som är kontrollerade för något icke-tomt värde.
- Glöm inte de lömska radioknapparna. Varför smygande? Det finns fallgropar i att kontrollera efter märken.
Eftersom vi har bestämt oss för att skriva ett mer eller mindre universellt manus måste vi tänka på perverterade ovanliga strukturer, som kommer att kallas "grupper" i framtiden. Med detta ord menar vi fält kopplade till varandra. Till exempel, om användaren har markerat kryssrutan "Skicka nyheter via e-post", blir "e-post"-posten obligatorisk att fylla i, eller de vill ofta dela upp telefonnumret i en kod och själva numret - då är det korrekta måste kontrolleras i alla fält, och felaktigheten i det ena medför ett fel i båda. Och felmeddelandet bör inte visas för alla fält i gruppen, utan bara för ett, annars kommer antalet av dem att börja blända dina ögon.
Vilken slutsats kan man dra?
Det är nödvändigt att organisera en regelbunden kontroll för ett textfält, en kontroll för e-post och "digitala" fält som telefonnummer, ålder, etc. Kryssrutor och alternativknappar markeras av den markerade egenskapen, rullgardinslistor markeras efter värde. För att tillfredsställa listiga grupper, skriv en hanterare för dem också. Ge dessutom möjligheten att kontrollera vissa fält av något slag anpassad funktion för särskilt svåra fall.
Enligt min åsikt finns det bara två lagringsalternativ här:
Ett JS-objekt kommer att fungera snabbare och se mycket mer korrekt ut än vissa icke-standardiserade attribut i taggar. Låt oss säga att det kommer att se ut så här:
Var checkThis=( handtag: "$("")", // pekare till fältet som kontrolleras typ: "e-post", // kontrolltyp: vanlig, e-post, nummertitel: "skriv in din e-postadress här, till exempel", // tips om fel nessess: true,//required flag group: false,//group pointer); var AllChecks=;//och detta är en array där alla markerade objekt skulle lagras
Om programmeraren kommer till platsen när den redan är helt upplagd (det vill säga handlingen utspelar sig i en science fiction-roman) - är detta tillvägagångssätt utmärkt. Men ofta måste något definitivt slutföras, inklusive att lägga till ytterligare fält eller skapa nya formulär, och att överlåta tillägget av fälthanterare till layoutdesigners samvete, även om du har en skriftlig konstruktör, innebär att du dömer dig själv till ständiga förfrågningar från dem i "a"-stilen Allt är trasigt här." Och då måste du glömma idéns huvudpostulat, automatisering (tja, mer exakt, befria dig själv, din älskade, från onödiga kroppsrörelser).
Sedan kan du prova att fylla in verifieringsdata i icke-standardiserade attribut och göra det lakoniska
till ett skrymmande monster som Vi kommer att fokusera på det här alternativet. Vi är för mångsidighet.Sedan anger vi följande bearbetade taggar:
| titel | Det är naturligtvis standard, men här kommer vi att skriva ett meddelande om den felaktiga ifyllningen av fältet. Och vi kommer att visa det i stilen "Specify"+titel |
| cfm_check | Verifieringsflaggan är vad vi kommer att använda för att söka efter fälten som kontrolleras. Och det kan ta följande värden:
|
| cfm_confirminfo | Som standard kommer fel att visas omedelbart efter att elementet kontrolleras, vilket inte alltid är bekvämt. Så låt oss ange i detta attribut jq-väljaren till elementet efter vilket felet kommer att visas. Till exempel, cfm_confirminfo=’#placeForErrors’ |
| cfm_function | För att inte komplicera den överbelastade cfm_check kommer vi här att skriva namnet på den icke-standardiserade fältkontrollfunktionen |
Vi har fått informationen, det återstår bara att behandla den. Algoritmen här är inte komplicerad:
- Vid ingången ger vi en pekare till formuläret för att utföra kontrollen (vi kan ha många formulär på sidan!);
- vi springer igenom specificerade element formulär, kontrollera att de är korrekt ifyllda;
- om det finns fel markerar vi dem om inte tillåter vi att formuläret valideras.
Det kanske är dags att producera js-kod som implementerar funktionen åtminstone delvis, eftersom en sådan massa text redan har skrivits ner?
If(typeof cFM_classError === "odefinierad")//här skriver vi css-klassen tilldelad fel fält var cFM_classError="cFM_wrong"; funktion cFM_checktrueAttr(förälder)//förbereder data för bearbetning //(förälder är en jq-pekare till formuläret, eller ett kombinationsblock) ( var error=true; //rensa upp efter den tidigare anropade funktionen $("div." +cFM_classError).remove ();//remove hints $("."+cFM_classError).each(function())(//remove error markering $(this).removeClass(cFM_classError); //leta efter fält för att kontrollera var inputsToHandle=false ; if(typeof parent !== "undefined") inputsToHandle=parent.find(""); else inputsToHandle=$("");//ja, om föräldern inte är specificerad kontrollera allt //ta tag i de hittade elementen och observera dem inputsToHandle.each(function())( if(error) error=cFM_prepareChecking(this);//kontrollera objekten, leta efter åtminstone ett enda fel annars cFM_prepareChecking(this); )); return error;//return true om alla element klarade ett fel, och false om någon misslyckades) funktionen cFM_prepareChecking(handle)// börjar kontrollera ett specifikt element och markerar felaktiga ( var error=true;/*return value; meningen är helt enkelt att visa att det finns ett fel tar värdet: sant - inga fel; false - fältet är inte ifyllt; "fel" - fältet är felaktigt ifyllt;*/ //bestäm fältets signatur om ett fel upptäcks i det. Som standard kommer //"Ange fältvärdet" att visas om titel inte anges var title = " fältvärde"; if(typeof $(handle).attr("title") !== "undefined" && $(handle).attr("title").length>0) title=$(handle).attr("title"); var after = handle;//куда лепить сообщение об ошибке var attribute = $(handle).attr("cFM_check");//значение великого атрибута cFM_check //а не задали ли какую хитрую функцию для проверки поля? if(typeof $(handle).attr("cFM_function") !== "undefined") var chkFunk=$(handle).attr("cFM_function"); //наконец, проверяем поле if(typeof chkFunk !== "undefined") error=window($(handle)); else error=cFM_checkFullness(handle); //коль ошибка закралась к нам if(error!==true) { //определяем, куда лепим сообщение об ошибке if(typeof $(handle).attr("cFM_confirmInfo") !== "undefined") { after=$(handle).attr("cFM_confirmInfo"); if(after.indexOf("self")===0)//если вдруг селфы непойми зачем прилепили after=after.substr(4); } if(error==="wrong")//коль поле заполнено неправильно $(after).after("!}
Ogiltigt fältvärde
"); else( if(error===false)//if $(after).after("
Ange "+titel+"
");//html errors else//if special check med specialhtml $(after).after(""); ) $(handle).addClass(cFM_classError);//lägger till en felklass if($(handle) . attr("type")=="radio")//vi slutför radioknapparna $("").addClass(cFM_classError error=false return error) cFM_checkFullness(handle)//this is standardfunktion kontroller ( var error = true; //läs data från attributen var attribut = $(handle).attr("cFM_check"); //required flag var required = true; if(attribute.indexOf("Y")=== -1) required=false; //check for format var format=attribute; if(required) format=attribute.substr(2); ha detta för elementet (case "checkbox": if(!$(handle).prop("checked")) error=false; break; case "radio"://promised problem with radio if(!$(handle) .prop("checked") && $(":checked").length==0) error=false else error=true; ).val().trim().length==0 || $(handle).val()=="0") && required) error=false else ( if(format==="num" )/. /check för ett nummer ( var regCheck = new RegExp("[^0-9\s-]+"); if(regCheck.test($(handle).val())) error="wrong"; ) if (format==="e-post")//sök efter e-post ( var regCheck = new RegExp("^(+[-._+&])*+@([-0-9a-zA-Z] +[. ])+(2,6)$"); if(!regCheck.test($(handle).val())) error="fel"; ) ) ha sönder;
) return error; ) Som exempel ger vi också speciell funktion
kontrollerar till exempel om det finns två ord i inmatningen (Förnamn Efternamn eller Förnamn, Efternamn). Ingången som utlöser kontrollen för denna funktion implementeras enligt följande:Och kontrollfunktionen kommer till exempel att se ut så här: function checkName(handle) ( var handleValue=handle.val().trim(); //som praxis visar, användare gör vad som helst för att skilja sitt förnamn från sitt efternamn if(handleValue.indexOf( " ")!==-1 || handleValue.indexOf(",")!==-1 || handleValue.indexOf(".")!==-1) returnerar true; false; Vi bör ställa in några av våra kontroller: div.cFM_wrong ( color:red; font-size:10px; position:absolute; width:140px; ) input.cFM_wrong( background: #ffd9d9; border-color:#d3adad; ) Validering av skriptformulär. Nu, om funktionen cFM_checkFullness() slutförs framgångsrikt (det vill säga returnerar true), bör skriptet skicka formuläret för bearbetning. Hur man implementerar detta beror på den specifika formen. Om bekräftelse på avsändning kommer fram skickaknapp
- då kan du prenumerera på formulärinlämningshändelsen (onsubmit) och, beroende på resultatet av kontrollen, skicka den eller inte. Till exempel, så här:
I ovanstående kod finns ingen kontroll för grupper (eftersom kodens krånglighet ökar avsevärt, och storleken på rullningslisten i den här artikeln skrämde förmodligen bort många besökare). Skillnaderna i algoritmen kommer att vara obetydliga: kontroll av element per grupp bör startas i ett separat block, och beroende på hur hela blocket fungerar, kommer ett felmeddelande att visas i ett specifikt element.
Det är sant, vid det här laget är det värt att sakta ner och tänka: är det verkligen nödvändigt att modifiera koden för att stödja grupper, eller kan vi begränsa oss till att skriva en separat verifieringsfunktion för ett par komplexa fält?
Vad har vi i slutändan? Genom att koppla ihop ett par filer (.js och .css) får vi funktionalitet för egenskapskontroll som du kan använda på alla webbplatser med sinnesro, förutsatt att ansluten jquery. När allt kommer omkring är det mycket trevligare att ha en uppsättning färdiga verktyg till hands än att lägga mycket tid på att producera dem före varje uppgift av samma typ.
Koppling och exempelFör det första behöver vi jquery bibliotek. Du kan ladda ner den till exempel från den officiella webbplatsen.
Eller infoga helt enkelt raden i rubriken (vad som finns inuti taggen) på din webbplats
Ladda sedan ner ( höger nyckel-> favoritobjekt med ordet "spara") härifrån är en fil med js-kod och, om nödvändigt, en fil med css-stilar för felaktiga fält härifrån.
Vi lägger till dem i rubriken också: Nu måste du ordna attributen för formulärfälten efter, beroende på vilken typ av kontroll du vill utföra.
Sista handen är att lägga till onsubmit-händelsetaggen: "onsubmit="return cFM_checktrueAttr($(this));"".
Låt oss nu försöka genomföra en kontroll av en så enkel form.
"Fool protection" är en uppsättning åtgärder för att förhindra att felaktig information matas in i ett formulär. Till exempel, om ett fält kräver inmatning av ett positivt tal från 0 till 10, bör du kontrollera att användaren inte anger text eller ett tal som inte ligger inom det angivna intervallet, dvs. 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.
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 kan du få det önskade resultatet 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 lämnat felaktigt och kan rätta till sitt misstag.
Obligatoriskt fältVissa 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. Används för att ange obligatoriska fält obligatoriskt attribut, som visas i exempel 1.
Exempel 1. Det obligatoriska attributet
HTML5 IE 10+ Cr Op Sa Fx
Obligatoriskt fält
Logga in:
Lösenord:
Obligatoriska fält måste fyllas i innan du skickar in formuläret, annars skickas formuläret inte till servern och webbläsaren kommer att utfärda en varning 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 korrekthetInledningsvis finns det två fält där användarinmatning kontrolleras automatiskt. Detta är webbadressen och adressen E-post. Chrome webbläsare kontrollerar också kalenderdatafältet för giltighet, men bara för att det inte har ett gränssnitt för val av musklickskalender. Följande regler gäller för dessa element.
- Webbadressen ( ) måste innehålla protokollet (http://, https://, ftp://).
- E-postadressen ( ) måste innehålla bokstäver eller siffror före @-symbolen, efter den, sedan en punkt och en toppdomän.
Webbläsare har lite olika policyer för att verifiera användardata. Till exempel ersätter Opera http-protokoll:// före den inmatade texten automatiskt, medan andra webbläsare förväntar sig det av användaren. Chrome och Opera kräver det postadress det fanns en poäng, det krävs inte för Firefox.
Exempel 2 visar en blankett med Obligatoriska fält, där två fält kontrolleras av webbläsaren.
Exempel 2: Datakorrekthet
HTML5 IE 10+ Cr Op Sa Fx
Data korrekthet
Fyll i formuläret (alla fält är obligatoriska)
Namn:
E-post:
Hemsida:
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
InmatningsmallVissa 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å, IP-adressen innehåller fyra siffror separerade med en punkt (192.168.0.1), postnummer Ryssland är begränsat till sex siffror (124007), telefonen innehåller ett riktnummer och ett specifikt antal siffror, ofta åtskilda av ett bindestreck (391 555-341-42), etc. Webbläsaren måste ange en inmatningsmall så att den kontrollerar 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 gå in hexadecimalt värde färg (#ffcc00) och om den inte är inom detta intervall visar webbläsaren ett felmeddelande.
Exempel 3. Inmatningsmall
HTML5 IE 10+ Cr Op Sa Fx
Färginmatning
Ange det hexadecimala färgvärdet (måste börja med #)
I fig. Figur 3 visar en varning i webbläsaren Chrome.
Ris. 3. De angivna uppgifterna matchar inte mallen
OgiltigförklaringValidering krävs inte alltid för ett formulär, till exempel kan en utvecklare vilja använda universell lösning i JavaScript och det behöver inte längre dubblettkontroll av webbläsaren. I liknande fall du måste inaktivera inbyggd validering. För att göra detta, använd novalidate-attributet för taggen. Exempel 4 visar användningen av detta attribut.
Exempel 4: Ogiltigförklaring
HTML5 IE 10+ Cr Op Sa Fx
novalidate-attribut
För liknande ändamål används attributet formnovalidate, som läggs till i knappen för att skicka in formuläret, i I detta fall att tagga. I det här fallet kommer formuläret från exempel 4 att se ut så här.
Denna handledning beskriver hur man skapar JavaScript-formulär, som kontrollerar att besökaren har fyllt i fälten korrekt innan data skickas till servern. Vi kommer först att förklara varför formulärvalidering är en användbar teknik, och sedan bygger vi ett enkelt exempel som förklarar hur det fungerar.
Varför måste jag kontrollera att formuläret är ifyllt?Formulärvalidering är en process där formulärdata verifieras innan bearbetning. Till exempel om ditt formulär har ett fält som användaren måste skriva in e-postadress, du kanske vill kontrollera att fältet är komplett innan du bearbetar formuläret vidare.
Det finns två huvudsakliga metoder för att kontrollera ifyllandet av ett formulär: på serversidan (med använder CGI skript, ASP, etc.) och på klientsidan (vanligtvis används JavaScript). Validering på serversidan är säkrare, men kräver i de flesta fall mer komplex kod, medan validering på klientsidan är enklare och snabbare (webbläsaren behöver inte ansluta till servern för att validera formuläret, så användaren får ett omedelbart svar om saknade fält som behöver fyllas i).
Formulärvalidering på klientsidan. Utförs vanligtvis med ett inbäddat JavaScript-skript.
Formulärvalidering på serversidan. Görs vanligtvis med ett CGI- eller ASP-skript.
I denna lektion vi kommer att bygga enkel form med klientsidan validering med använder JavaScript. Du kan sedan anpassa den efter dina behov.
Ett enkelt formulär med verifiering.Låt oss bygga ett enkelt formulär med fyllningskontroll med hjälp av ett skript. Detta formulär har ett textfält "Ditt namn" och en knapp för att skicka data. Vårt skript kontrollerar att användaren har skrivit in sitt namn innan data skickas till servern.
Öppna formuläret och se det i aktion. Försök att klicka på knappen "Skicka data" utan att ange något i fältet "Ditt namn".
Sidan innehåller en JavaScript-funktion som heter validate_form(). Den kontrollerar att formuläret är komplett. låt oss titta på formen först.
FormDen första delen av formuläret är formtaggen
Formuläret heter contact_form. Med dess hjälp kommer vi att få tillgång till formuläret från JavaScript-funktioner kontroller.
Formuläret använder en postmetod för att skicka data till en stub htm-fil, som helt enkelt visar ett meddelande. Faktum är att du kan skicka data till ditt CGI-skript, ASP-sida, etc. (till exempel för att skicka post).
Formtaggen innehåller också ett onsubmit-attribut för att anropa JavaScript-valideringsfunktionen validate_form() när knappen Skicka data klickas. Funktionen returnerar ett booleskt värde, för vilket true betyder "kontrollen lyckades" och false betyder "data är i paus". På så sätt kan vi förhindra att formulärdata skickas om användaren inte har fyllt i det korrekt.
Resten av formulärkoden lägger till inmatningsfältet contact_name och knappen "Skicka data":
Vänligen fyll i ditt namn.
Ditt namn:
validate_form() funktionFormvalideringsfunktionen validate_form() är inbyggd i rubriken i början av sidan:
Den första raden () talar om för webbläsaren vad som kommer härnäst JavaScript-kod, och HTML-kommentaren (
