JavaScript-skjemavalidering. Validering av innlagte data ved hjelp av JavaScript, sender utfylt skjema på e-post
Vi har alle fylt ut skjemaer på et tidspunkt. Noen behandlet til og med resultatene de samlet inn, det være seg bestillinger i en nettbutikk eller returtjeneste. Når vi ber brukeren om å fylle ut informasjon, vil vi at den skal samsvare med et bestemt format, spesielt hvis den senere behandles av et CMS som 1C bitrix, WorldPress, og så videre. Tross alt, hvis brukeren av en eller annen grunn i telefonkolonnen skriver ned sin Skype pålogging, kan det oppstå en databehandlingsfeil: den vil ikke bli registrert, og brukeren vil bli kastet tilbake til skjemautfyllingssiden. Følgelig oppstår spørsmålet om hvordan du kan kontrollere de innlagte dataene på nettet og forhindre sending av feil data.
Arbeidet med den beskrevne løsningen, utviklet av oss, kan umiddelbart vurderes ved å bruke eksemplet på bestillingsprosedyren på Newcom-nettstedet. Nedenfor vil vi begynne en historie om utviklingsprosessen, samt gi noen flere eksempler.
Formulering av problemetÅ gjøre en enkel javascript-sjekk av skjemafeltene før du sender det til serveren tar et par minutter. Bare når du skriver denne enkle tingen for tiende gang for bare ett nettsted, tenker du ufrivillig på å automatisere denne prosessen. På et tidspunkt ble tankene om dette så tvangstanke at jeg måtte sette meg ned og lage et miniatyrbibliotek som tok for seg åkrene.
Hvis du deler opp problemet i blokker, får du noe sånt som følgende diagram: 
Vel, hvis det er en ordning, så la oss implementere den.
Hvilke felt er mest vanlige på skjemaer?
- Tekstinndata, som som regel kontrolleres enten for fullstendighet, eller for enkle regulære uttrykk som e-post eller telefon.
- Avmerkingsbokser sjekket for tilstedeværelsen av et merke (som en avtale om behandling av personopplysninger).
- Vi kan også nevne nedtrekkslister som er sjekket for en eller annen ikke-tom verdi.
- Ikke glem de lumske radioknappene. Hvorfor lumsk? Det er fallgruver ved å se etter merker.
Siden vi har satt oss for å skrive et mer eller mindre universelt manus, må vi tenke på perverterte uvanlige strukturer, som vil bli kalt "grupper" i fremtiden. Med dette ordet mener vi felt knyttet til hverandre. For eksempel, hvis brukeren har merket av for «Send nyheter via e-post», blir «e-post»-elementet obligatorisk å fylle ut, eller de liker ofte å dele telefonnummeret i en kode og selve nummeret - da er riktigheten må sjekkes i alle felt, og feilen til det ene medfører feil i begge. Og feilmeldingen skal ikke vises for alle feltene i gruppen, men bare for ett, ellers vil antallet av dem begynne å blende øynene dine.
Hvilken konklusjon kan man trekke?
Det er nødvendig å organisere en vanlig sjekk for et tekstfelt, en sjekk for e-post og "digitale" felt som telefonnummer, alder osv. Avmerkingsbokser og alternativknapper er merket av den avkryssede egenskapen, rullegardinlister er merket etter verdi. For å tilfredsstille utspekulerte grupper, skriv en behandler for dem også. Gi i tillegg muligheten til å sjekke noen felt av noe slag tilpasset funksjon for spesielt vanskelige saker.
Etter min mening er det bare to lagringsalternativer her:
Et JS-objekt vil fungere raskere og se mye mer korrekt ut enn noen ikke-standardattributter i tagger. La oss si at det vil se slik ut:
Var checkThis=( handle: "$("")",//peker til feltet som kontrolleres type: "email",//sjekktype: vanlig, e-post, nummertittel:"skriv inn e-posten din her, for eksempel", //hint om feil nessess: true,//required flag group: false,//group pointer); var AllChecks=;// og dette er en matrise der alle sjekkede objekter vil bli lagret
Hvis programmereren kommer til nettstedet når det allerede er fullstendig lagt ut (det vil si at handlingen foregår i en science fiction-roman) - er denne tilnærmingen utmerket. Men ofte vil noe definitivt måtte fullføres, inkludert tillegg til tilleggsfelt eller nye skjemaer opprettes, og å overlate tillegget av feltbehandlere til samvittigheten til layoutdesignerne, selv om du har en skriftlig konstruktør, betyr å dømme deg selv til konstante forespørsler fra dem i stil med "men alt er ødelagt her." Og så må du glemme hovedpostulatet til ideen, automatisering (vel, mer presist, kvitte deg selv, din kjære, for unødvendige kroppsbevegelser).
Deretter kan du prøve å fylle verifikasjonsdata inn i ikke-standardattributter, og gjøre det lakoniske
inn i et klumpete monster som Vi vil fokusere på dette alternativet. Vi er for allsidighet.Deretter legger vi inn følgende behandlede tagger:
| tittel | Det er selvfølgelig standard, men her vil vi skrive en melding om feilfylling av feltet. Og vi vil vise den i stilen "Spesifiser"+tittel |
| cfm_check | Bekreftelsesflagget er det vi skal bruke for å søke etter feltene som blir sjekket. Og det kan ta følgende verdier:
|
| cfm_confirminfo | Som standard vil feil vises umiddelbart etter at elementet kontrolleres, noe som ikke alltid er praktisk. Så la oss indikere i dette attributtet jq-velgeren til elementet som feilen vil bli vist etter. For eksempel, cfm_confirminfo='#placeForErrors' |
| cfm_function | For ikke å komplisere den overbelastede cfm_check, her vil vi skrive navnet på den ikke-standardiserte feltkontrollfunksjonen |
Vi har mottatt informasjonen, det gjenstår bare å behandle den. Algoritmen her er ikke komplisert:
- Ved inngangen gir vi en peker til skjemaet for å utføre kontrollen (vi kan ha mange skjemaer på siden!);
- vi løper gjennom spesifiserte elementer skjemaer, sjekke at de er fylt ut riktig;
- hvis det er feil, merker vi dem, hvis ikke lar vi skjemaet valideres.
Kanskje det er på tide å produsere js-kode som implementerer funksjonaliteten i det minste delvis, siden en slik haug med tekst allerede er skrevet ned?
If(typeof cFM_classError === "undefined")//her skriver vi css-klassen som er tilordnet feil felt var cFM_classError="cFM_wrong"; funksjon cFM_checktrueAttr(parent)//forbereder data for behandling //(parent er en jq-peker til skjemaet, eller en kombinasjonsblokk) ( var error=true; //ryd opp etter den tidligere kalte funksjonen $("div." +cFM_classError).remove ();//remove hints $("."+cFM_classError).each(function())(//remove error utheving $(this).removeClass(cFM_classError); )); //se etter felt for å sjekke var inputsToHandle=false ; if(typeof parent !== "undefined") inputsToHandle=parent.find(""); else inputsToHandle=$("");//vel, hvis overordnet ikke er spesifisert, la oss sjekk alt //grip de funnet elementene og observer dem inputsToHandle.each(function())( if(error) error=cFM_prepareChecking(this);//sjekk objekter, se etter minst en enkelt feil ellers cFM_prepareChecking(this); ) ); return error;//return true hvis alle elementene bestod en feil, og false hvis noen mislyktes ) function cFM_prepareChecking(handle) // starter kontrollen spesifikt element og markerer feilaktige ( var error=true;/*returverdi; meningen er ganske enkelt å vise at det er en feil tar verdien: sant - ingen feil; usant - feltet er ikke fylt ut; "feil" - feltet er fylt ut feil ;*/ //bestem med signatur av feltet om det oppdages en feil i det. Som standard vil //"Spesifiser feltverdien" vises hvis tittel ikke er spesifisert var title = " feltverdi"; 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 //а не задали ли какую !} vanskelig funksjon sjekke feltet? if(typeof $(handle).attr("cFM_function") !== "udefinert") var chkFunk=$(handle).attr("cFM_function"); //til slutt, sjekk feltet if(typeof chkFunk !== "undefined") error=window($(handle)); else error=cFM_checkFullness(håndtak); //hvis en feil har sneket seg inn i oss if(error!==true) (//bestem hvor feilmeldingen skal plasseres if(typeof $(handle).attr("cFM_confirmInfo") !== "undefined") ( after=$ (handle).attr("cFM_confirmInfo"); if(after.indexOf("self")===0)//hvis selfiene plutselig ikke forstår hvorfor de festet after=after.substr(4) ); ) if(error=== "feil")//hvis feltet er fylt ut feil $(after).after("
Ugyldig feltverdi
"); else( if(error===false)//if $(after).after("
Spesifiser "+tittel+"
");//html feil else//if special sjekk med spesiell html $(after).after(""); ) $(handle).addClass(cFM_classError);//legger til en feilklasse if($(handle) . attr("type")=="radio")//vi avslutter radioknappene $("").addClass(cFM_classError); error=false; ) return error; ) funksjon cFM_checkFullness(handle)//og dette standard funksjon sjekker ( var error = true; //les data fra attributtene var attribute = $(handle).attr("cFM_check"); //required flag var required = true; if(attribute.indexOf("Y")=== -1) required=false; //sjekk for format var format=attributt; if(required) format=attribute.substr(2); switch($(handle).attr("type"))//la oss se hva vi ha dette for elementet ( case "checkbox": if(!$(handle).prop("checked")) error=false; break; case "radio"://lovet problem med radio if(!$(handle) .prop("checked") && $(":checked").length==0) error=false; else error=true; break; //både tekst og velg og tekstområde er identiske her standard: if(( $ (handle).val().trim().length==0 || $(handle).val()=="0") && required) error=false; else ( if(format==="num) " )//sjekk etter et tall ( var regCheck = new RegExp("[^0-9\s-]+"); if(regCheck.test($(handle).val())) error="wrong" ; ) if(format==="e-post")//sjekk etter e-post ( var regCheck = new RegExp("^(+[-._+&])*+@([-0-9a-zA-Z] +[.])+(2,6)$"); if(!regCheck.test($(handle).val())) error="wrong"; ) ) gå i stykker; ) returfeil; )
Som eksempel gir vi også spesiell funksjon sjekker for eksempel om det er to ord i inndataene (Fornavn Etternavn eller Fornavn, Etternavn). Inndataene som utløser sjekken for denne funksjonen, implementeres som følger:
Og sjekkefunksjonen vil for eksempel se slik ut: function checkName(handle) ( var handleValue=handle.val().trim(); //som praksis viser, brukere gjør alt for å skille fornavnet fra etternavnet sitt if(handleValue.indexOf( " ")!==-1 || handleValue.indexOf(",")!==-1 || handleValue.indexOf(".")!==-1) returner true; ellers returnerer falsk; ) For en stil Vi bør sette noen av sjekkene våre: div.cFM_wrong ( color:red; font-size:10px; position:absolute; width:140px; ) input.cFM_wrong( background: #ffd9d9; border-color: #d3adad; ) Validering av skriptskjema.Nå, hvis cFM_checkFullness()-funksjonen fullføres (det vil si returnerer true), skal skriptet sende skjemaet for behandling. Hvordan du implementerer dette avhenger av den spesifikke formen. Hvis bekreftelse for innsending kommer gjennom send-knappen, kan du abonnere på skjemainnsendingshendelsen (på innsending) og, avhengig av resultatet av sjekken, sende den eller ikke. For eksempel slik:
og her, som, en haug med form-tags. Hvis sendingen gjøres med ajax, så er alt enkelt: kall det avhengig av resultatet av funksjonen cFM_checktrueAttr($(this)); Ytterligere problemer.
I koden ovenfor er det ingen sjekk for grupper (fordi besværligheten i koden øker betydelig, og størrelsen på rullefeltet til denne artikkelen skremte sannsynligvis av mange besøkende). Forskjellene i algoritmen vil være ubetydelige: kontroll av elementer etter gruppe bør startes i en egen blokk, og avhengig av driften av hele blokken, vil en feilmelding vises i et spesifikt element.
Riktignok på dette tidspunktet er det verdt å senke farten og tenke: er det virkelig nødvendig å endre koden for å støtte grupper, eller kan vi begrense oss til å skrive en egen verifiseringsfunksjon for et par komplekse felt?
Hva har vi til slutt? Ved å koble til et par filer (.js og .css), får vi funksjonalitet for egenskapssjekking som du kan kaste på alle nettsteder med ro i sinnet, forutsatt at tilkoblet jquery. Tross alt er det mye hyggeligere å ha et sett med ferdige verktøy for hånden enn å bruke mye tid på å produsere dem før hver oppgave av samme type.
Tilknytning og eksemplerFor det første trenger vi jquery-biblioteket. Du kan laste den ned, for eksempel fra den offisielle nettsiden.
Eller bare sett inn linjen i overskriften (det som er inne i taggen) på nettstedet ditt
Last deretter ned ( høyre nøkkel-> favorittelement med ordet "lagre") herfra er en fil med js-kode og, om nødvendig, en fil med css-stiler for feilaktige felt herfra.
Vi legger dem til i overskriften også: Nå må du ordne attributtene til skjemafeltene etter, avhengig av hva slags sjekk du vil utføre.
Siste touch er å legge til onsubmit-hendelsestaggen: "onsubmit="return cFM_checktrueAttr($(this));"".
La oss nå prøve å implementere en sjekk av et så enkelt skjema.
Svært ofte er det behov for å legge til et skjema på siden, fordi skjemaet er mest populær måte kommunikasjon mellom brukeren og nettstedet, og det er svært viktig at dataene som legges inn av brukeren er korrekte. Og for at skjemaet skal sendes med riktige data, må det kontrolleres før du gjør det. Og derfor vil vi behandle skjemavalidering i JavaScript i denne artikkelen.
La oss først lage et skjema som vi så sjekker:
Navnet ditt:
Ditt passord:
Hvilket kjønn er du:
Velg nummer:
1
2
3
Din beskjed:
Enig med våre regler:
Last opp fil:
Dette er skjemaet. Jeg håper at du er kjent med HTML og jeg tror det koster ingenting å forklare. Hvis noe ikke er klart, så se på hvordan denne koden fungerer i nettleseren.
La oss nå snakke om hvordan du henter verdier fra skjemafelt. Tross alt, før du sjekker dem, må du finne ut hva brukeren skrev der. Generell form for å få tilgang til skjemafeltet slik:
Document.form_name.field_name.value;
Det vil si at vi først får tilgang til Document-objektet, deretter Form-egenskapen (via skjemanavnet), deretter navnet på feltet i dette skjemaet, og til slutt verdien av feltet. La oss skrive ut alle feltene som følger dette generelle synet:
Var form = dokument.form1;
document.write(form.firstname.value + "
");
document.write(form.pass.value + "
");
document.write(form.number.value + "
");
document.write(form.message.value + "
");
document.write(form.rules.value + "
");
document.write(form.hidefield.value + "
");
document.write(form.fileupload.value + "
");
document.write(form.sub.value + "
");
document.write(form.but.value + "
");
Dette er alle felt som har en verdi-egenskap og kan nås på denne måten.
La oss nå snakke om ett spesielt formelement - radio. La oss få tilgang til radioverdien:
Var sex = (dokument.form1.sex.sjekket)?
document.form1.sex.value: document.form1.sex.value;
Legg merke til at vi har to radioelementer som er i sexarrayen. Indeksene deres er 0 og 1. I dette manuset vi sjekker om vårt første element er inkludert ( krysset av), så tildeler vi verdien til det første elementet, ellers tildeler vi verdien til det andre elementet. Forresten, hvis noen ikke forstår, er dette en konstruksjon av IF-tilstandsoperatøren. Selvfølgelig kan man skrive det slik:
Var sex;
if (dokument.form1.kjønn.sjekket) kjønn = dokument.form1.kjønnsverdi;
annet kjønn = dokument.form1.kjønnsverdi;
Nå som vi har tilgang til alle feltene, la oss endelig validere skjemaet. Men først, la oss legge til "onSubmit"-attributtet til taggen med verdien "return check(); ". Dette attributtet vil gjøre følgende: før du sender inn skjemaet, kall en funksjon som skal returnere enten sant eller usant. Hvis det returnerer sant , vil skjemaet sendes til serveren, og hvis det er usant , sendes ikke skjemaet.
La oss nå lage en check()-funksjon, som for det første skal sjekke hele skjemaet, informere brukeren om feil, og også returnere true (hvis skjemaet er helt korrekt) eller usant (hvis skjemaet inneholder feil).
Funksjonssjekk(skjema) (
var fornavn = form.fornavn.verdi;
var pass = form.pass.value;
var melding = form.melding.verdi;
var regler = form.rules.value;
var file = form.fileupload.value;
var dårlig = "";
if (fornavn.lengde< 3)
bad += "Navnet er for kort" + "\n";
if (fornavn.lengde > 32)
bad += "Navnet er for langt" + "\n";
if (pass.length< 3)
bad += "Passordet er for kort" + "\n";
if (pass.length > 32)
bad += "Passordet er for langt" + "\n";
hvis (melding.lengde< 3)
bad += "Meldingen er for kort" + "\n";
if (regler != "på")
bad += "Du var ikke enig i reglene" + "\n";
if (fil.lengde == 0)
bad += "Du har ikke valgt en fil å laste opp" + "\n";
if (dårlig != "") (
bad = "Skjemaet er fylt ut feil:" + "\n" + dårlig;
varsling(dårlig);
returner falsk;
}
return true;
}
I dette skriptet får vi først alle dataene som må sjekkes og skriver dem inn i variabler. Deretter lager vi en variabel bad , som vi skriver inn alle feil data. Så er det et helt sett med IF-er som sjekker feltene i skjemaet og skriver eventuelle feil til den dårlige variabelen. Deretter, hvis den dårlige variabelen ikke er tom (det vil si at det var feil), viser vi et vindu (alert()) med feil. Og vi returnerer usant slik at skjemaet ikke sendes inn. Hvis den dårlige variabelen er tom, returnerer vi ganske enkelt true slik at skjemaet sendes for behandling til "handler.php".
0
Jeg kommer med en kryssforespørsel ajax domene til php-siden din på serveren. Jeg sender inn et skjema fra html via ajax til mitt php-siden på server. Problemer med validering på klientsiden.
Jeg vet ikke hvordan jeg skal utføre validering på klientsiden før jeg sender inn skjemaet.
HTML-skjema standardskjema, plassering av inndatafelt: fornavn, etternavn, melding.... Mitt HTML-skjema, på klientsiden:
var output = $(".nesa"); $(document).ready(function())( $("#form1").submit(function (e) ( e.preventDefault(); $.ajax(( url: "http://www.example.com / form.php", crossDomain: true, //set as a cross domain requests type: "post", data: $("#form1").serialize(), beforeSend: function())( // add spinner $ (" .spinner").append(" 
"); ), suksess: funksjon (data) ( $(".nesa").html(data); alert("sendt " + data); ), feil: funksjon())( output.text("Meldingen er ikke sendt!"); ) )); )); ));
Hvordan er validering? Jeg prøver å legge inn kode i sendmail, men uten hell. Eller er det mulig å bruke submitHandler?
Tanken er at når brukeren klikker på "Send"-knappen, kjører denne sjekken og hvis "lim inn adressen" mislykkes E-post" Nå når jeg klikker på send-knappen, sender du dataene til serveren. Jeg vil at de første inndatafeltene skal valideres.
Dette skjemaet er det faktiske arbeidet med å sende inn data til serveren, men trenger bare å finne ut hvordan du gjør valideringen. Hvor plasserer jeg validering i en ajax-samtale?
Takk til
- 5 svar
Sortering:
Aktivitet
0
Vennligst bekreft skjemaet før du sender inn AJAX-forespørsel. Hvis det ikke er noen feil, bør ajax-forespørselen sendes, ellers returneres falsk. Du får til dette:
$("#form1").submit(function (e) ( e.preventDefault(); // Få påloggingsnavn-verdien og trim den var name = $.trim($("#name").val()) ; // Sjekk om det er tomt eller ikke hvis (navn === "") ( alert("Tekst-feltet er tomt."); return false; ) ));
Du kan også gjøre en OnKeyUp-funksjon.
0
For det første, bruker du faktisk et AJAX-skjema?
Du forklarte at du laster inn skjemaet via AJAX, men sender du det på samme måte? Det virker for meg som du prøver å sende HTML-kode. Du kan koble til klikk-hendelsen for send inn-knappen før du sender inn skjemaet. Men siden knappen legges til siden under kjøretid, må du registrere en hendelse på dokument .
$(document).on("klikk", "input", function() ( // Valider skjema // Legg til feilmelding ved feil, og returner // Ellers send inn skjema via AJAX ));
Uansett, du kan bruke jQuerys uskarphet som et alternativ for å sjekke hvert felt når brukeren går videre til neste. Du kan til og med sjekke hver gang brukeren trykker på en tast med tastetrykk .
1
Lag en funksjon for å validere et skjema som returnerer sant/usant. Ring funksjonen rett før $.ajax. sjekk om retur er usann, så returner.. se eksempel nedenfor...
If(!validateForm()) returner false;
0
Jeg sjekker dem alltid rett før jeg legger dem inn i AJAX-samtalen. Her er min eksamen
$("#form_nieuwsbrief").bind("submit",function())( var name = $("input").val(); var email = $("input").val(); var continue = true ; if (navn=="")( $("input").css(("border":"2px solid rød")); fortsett = usann; ) if (email=="")( $(" input ").css(("border":"2px solid rød")); fortsett = usann; ) if(fortsett == usann)( $("#msg").append("Du har glemt informasjonen i vullen . "); setTimeout(function())( $(".alert").fadeOut(400, function())( $(this).remove(); )) ;),10000); ) if(fortsett = = sant) ( // foreta ajax-anropet
Det er bare et nyhetsbrev som ber om navn og e-postadresse. Men prinsippet er det samme. Før du foretar ajax-anropet, lag en if else-setning med variabelen du angir hvis noe er usant. ellers vil du holde deg til den første sjekken hans slik at du kan fortsette.
«Fool protection» er et sett med tiltak for å hindre innføring av uriktige opplysninger i et skjema. For eksempel hvis du trenger å skrive inn i et felt positivt tall fra 0 til 10, så bør du sjekke at brukeren ikke har skrevet inn tekst eller et tall som ikke ligger i det angitte området, dvs. tallet skal ikke være mindre enn null og mer enn ti.
Hvorfor legges det inn feil informasjon? Dette gjøres hovedsakelig av tre grunner.
Det skal forstås at presis og korrekt formulering, selv om den reduserer sannsynligheten for feil, ikke på noen måte redder deg fra dem. Bare tekniske midler på serversiden lar deg få det nødvendige resultatet og unngå å legge inn feil informasjon. Imidlertid lar revisjon eller, som det også kalles, validering på klientsiden deg raskt sjekke dataene som er lagt inn av brukeren for korrekthet, uten å sende skjemaet til serveren. Dette sparer brukertid og reduserer belastningen på serveren. Fra et brukervennlighetssynspunkt er det også fordeler - brukeren mottar umiddelbart en melding om hvilken informasjon han har skrevet inn feil og kan rette opp feilen.
Obligatorisk feltNoen skjemafelt må fylles ut før de sendes til serveren. Dette gjelder for eksempel registreringsskjemaet, hvor du må oppgi pålogging og passord. Brukes til å spesifisere obligatoriske felt nødvendig attributt, som vist i eksempel 1.
Eksempel 1. Det påkrevde attributtet
HTML5 IE 10+ Cr Op Sa Fx
Obligatorisk felt
Logg Inn:
Passord:
Obligatoriske felter må fylles ut før innsending av skjemaet, ellers sendes ikke skjemaet til serveren og nettleseren vil gi en advarsel om dette. Meldingstypen avhenger av nettleseren, for eksempel viser Chrome et verktøytips som vist i fig. 1.
Ris. 1. Obligatorisk felt er ikke fylt ut
DatariktighetI utgangspunktet er det to felt der brukerinndata sjekkes automatisk. Dette er en nettadresse og en e-postadresse. Chrome-nettleser sjekker også kalenderdatafeltet for gyldighet, men bare fordi det ikke har et museklikk-kalendervalggrensesnitt. Følgende regler gjelder for disse elementene.
- Nettadressen ( ) må inneholde protokollen (http://, https://, ftp://).
- E-postadressen ( ) må inneholde bokstaver eller tall før @-symbolet, etter det, deretter et punktum og et toppdomene.
Nettlesere har litt forskjellige retningslinjer for verifisering av brukerdata. For eksempel erstatter Opera http-protokoll:// før den angitte teksten automatisk, mens andre nettlesere forventer det fra brukeren. Chrome og Opera krever det postadresse det var et poeng, det er ikke nødvendig for Firefox.
Eksempel 2 viser et skjema med obligatoriske felt der to felt er validert av nettleseren.
Eksempel 2: Datakorrekthet
HTML5 IE 10+ Cr Op Sa Fx
Datariktighet
Fyll ut skjemaet (alle felt er obligatoriske)
Navn:
E-post:
Nettsted:
Opera sjekker bare et skjemaelement hvis det har et navneattributt.
Hva som skjer i Opera når du legger inn feil data er vist i fig. 2.
Ris. 2. Advarsel om feil data
InndatamalNoen data kan ikke klassifiseres i en av skjemaelementtypene, så du må bruke et tekstfelt for det. I dette tilfellet føres de iht en viss standard. Så, IP-adressen inneholder fire tall atskilt med en prikk (192.168.0.1), postnummer Russland er begrenset til seks sifre (124007), telefonen inneholder et retningsnummer og et spesifikt antall sifre, ofte atskilt med en bindestrek (391 555-341-42), osv. Nettleseren må spesifisere en inndatamal slik at den sjekker dataene som er lagt inn av brukeren i henhold til den. For å gjøre dette brukes mønsterattributtet, og verdien er et regulært uttrykk. Noen typiske verdier er oppført i tabellen. 1.
Eksempel 3 ber deg gå inn heksadesimal verdi farge (#ffcc00), og hvis den ikke er i dette området, viser nettleseren en feilmelding.
Eksempel 3. Inndatamal
HTML5 IE 10+ Cr Op Sa Fx
Fargeinngang
Skriv inn den heksadesimale fargeverdien (må starte med #)
I fig. Figur 3 viser en advarsel i Chrome-nettleseren.
Ris. 3. De angitte dataene samsvarer ikke med malen
UvalideringValidering er ikke alltid nødvendig for et skjema; for eksempel kan en utvikler ønske å bruke universell løsning i JavaScript, og det trenger ikke lenger duplikatkontroll av nettleseren. I slike tilfeller må du deaktivere innebygd validering. For å gjøre dette, bruk novalidate-attributtet til taggen. Eksempel 4 viser bruken av dette attributtet.
Eksempel 4: Uvalidering
HTML5 IE 10+ Cr Op Sa Fx
novalidate-attributt
For et lignende formål brukes formnovalidate-attributtet, som legges til knappen for å sende inn skjemaet, i i dette tilfelletå merke. I dette tilfellet vil skjemaet fra eksempel 4 se slik ut.
Når du legger til et skjema på et nettsted, for eksempel et skjema tilbakemelding, er det ofte nødvendig å sjekke alle eller noen felt før sending for å sikre at de er fullstendige. Teoretisk kan dette gjøres bruker PHP, derimot bruker JavaScript lar deg laste ned serverskriptet ved å overføre all handling direkte til brukerens nettleser.
La oss anta at vi har et lite skjema som består av to innganger (tekst og passord), et tekstområde og en send-knapp. Vår oppgave er å sjekke at de to første inndataene og tekstområdet er tomme rett før du sender inn skjemaet. Hvis det ikke er tomme felt, skal skjemaet sendes inn. Hvis tomme felt vil være, så må du sette en ring rundt dem med en rød ramme, vise en melding i form av et varsel om at du må fylle ut alle feltene, og deretter deaktivere innsending av skjemaet. Etter at brukeren har fjernet varselet, skal kantfargen på feltene gå tilbake til opprinnelig tilstand. Nettstedet til Zheka Nesmelov vil hjelpe deg med å designe selve skjemaet vakkert.
For at alt skal fungere som det skal, vil vi binde verdien som returneres av send()-funksjonen til onsubmit-hendelsen i skjemaet. Denne funksjonen vil returnere sant eller usant avhengig av om alle feltene er fylt ut. Hvis false returneres, vil skjemaet ikke sendes når du klikker på knappen, hvis sant, vil skjemaet sendes. Merk at vi ikke gir feltene en id (dette ville gjøre dem mye enklere å koble gjennom JavaScript DOM).
Sjekker utfyllingen av skjemafelt i JavaScriptLa oss nå gå videre til JavaScript-koden. Her vil det være to funksjoner. Den første send()-funksjonen utfører selve kontrollen. Med verdien av den gyldige variabelen vil vi forstå om alle felt er fylt ut etter at kontrollen er fullført. I elems plasserer vi alle elementene i den første formen (indeks = 0) i dokumentet vårt. I stedet for 0 kan du bruke for eksempel navnet på skjemaet som en streng (hvis det er spesifisert). Neste i løkken går vi gjennom alle elementene i dette skjemaet, og sjekker samtidig om det gjeldende elementet er tekstområde eller inndata med type = tekst || passord. I så fall kontrollerer du verdien av dette elementet. Tross alt vil verdi inneholde teksten som er skrevet inn av brukeren. Hvis verdi = tom linje, så tildeler vi elementets kantlinje rød farge, og sett den gyldige variabelen til false. Helt til slutt, etter å ha passert gjennom alle elementene, sjekker vi gyldig. Hvis det er usant, viser vi et varsel, deaktiverer innsending av skjema og markerer i rødt bare de feltene som ikke er fylt ut. Ellers send inn skjemaet.
Den andre funksjonen i JavaScript-koden vil bli utført umiddelbart etter at dokumentet er lastet. Når du holder musen over skjemaet (onmouseover-hendelsen), vil loopen begynne å iterere gjennom alle elementene. Hvis noen av elementene grense CSS eiendom= "2px solid rød", så blir den tildelt standardverdien (den røde fargen fjernes).
Det er alt. Alt som gjenstår er å dekorere formen din vakkert!
Legg igjen en kommentar, klikk på «Liker» («Liker») og «Lagre», så skal jeg skrive noe annet interessant for deg :)