Een beetje geschiedenis...

Gisteren heb ik aan één opdracht gewerkt, of liever gezegd deze afgerond. IN WordPress-beheerder Ik heb velden gemaakt voor het invoegen van telefoonnummers, adressen, enz.

De klant vroeg om extra validatie van de in te vullen formuliervelden, zodat gebruikers deze niet leeg konden indienen. Dit alles kon gedaan worden eenvoudige methode veldvalidatie via HTML5. Maar deze methode beviel mij niet.

Ik begon over deze vraag na te denken en de oplossing kwam! U kunt valideren dat formuliervelden worden ingevuld met JQuery Validation. Deze methode kan op alle zoekmachines, sites, enz. worden gebruikt.
Dus, JQuery-plug-in Validatie controleert de formuliervelden aan de hand van de regels die u hebt gemaakt en wordt weergegeven als er geen overeenkomst is dynamische fouten, die de gebruiker heeft gemaakt bij het invullen van het formulier.

Laten we beginnen met het maken van het formulier.

Maak een bestand voor het formulier. Als er een bestand met een formulier is, sla dan het eerste punt over. Zo ziet de formuliercode eruit:

Jouw naam:

Uw wachtwoord:

Let op id=‘mijnformulier-1’, naam=‘inloggen’, naam=‘wachtwoord’. Dit zijn de namen die ik zal gebruiken wanneer ik de formuliervalidatieregels maak. Als je wilt, kun je ze bij je eigen naam noemen.

Naar het bestand waarin het formulier wordt geplaatst, de plug-in JQuery Validation en een bestand met de extensie “.js”, waarin u uw regels schrijft voor het valideren van het formulier.
Plak deze code tussen tags:

Maak een map "js" en maak daar een bestand "myscriptspravil.js" met de volgende code: $(document).ready(function())( $("#myform-1").validate(( // regels voor velden met naam- en wachtwoordregels:( login:( vereist: true, // het naamveld is verplicht minlength: 4, // het naamveld moet minimaal 4 tekens lang zijn maxlength: 16, // het naamveld mag niet meer zijn dan 16 tekens), wachtwoord:( vereist: true, // het wachtwoordveld is vereist minlength: 6, // het wachtwoordveld moet minimaal 6 tekens lang zijn maxlength: 16, // het wachtwoordveld mag niet meer dan 16 tekens bevatten ), ), // bericht voor het veld met naam en wachtwoord, als iets niet volgens de regels was berichten:( login:( verplicht: "Dit veld is verplicht", // bericht voor naam, als het veld niet is ingevuld in minlength: " De naam moet minimaal 4 tekens bevatten, // bericht voor de naam als het veld minder dan 4 tekens bevat maxlength: " Maximaal aantal tekens voor de naam - 16", // bericht voor de naam als het veld meer dan 16 tekens bevat), wachtwoord:( verplicht: "Dit veld is verplicht", // bericht voor het wachtwoord als het veld niet is ingevuld minlength : "Het wachtwoord moet minimaal 6 tekens bevatten", // bericht voor het wachtwoord als het veld minder dan 6 tekens bevat maxlength: "Maximum aantal tekens - 16", // bericht voor het wachtwoord als het veld meer dan 16 tekens bevat ), ))));

Laten we de code een beetje analyseren.
Punt nr. 3.

$("#mijnformulier-1").validate((

“mijnformulier-1” is de naam van het formulier en wordt hier weergegeven:

Punt nr. 5.
regels:( – betekent regels. Hier moet u regels schrijven voor de velden tussen haakjes regels:( )

Punt nr. 7.

login:( – hier maken we regels voor het veld “Naam”. We hebben de veldnaam uit het formulier overgenomen

We schrijven de regels gescheiden door komma's tussen haakjes login:( )

Punt nr. 13.

wachtwoord:( – hier maken we regels voor het wachtwoordveld. We hebben de veldnaam uit het formulier overgenomen

We schrijven de regels gescheiden door komma's tussen haakjes wachtwoord:( )

Punt nr. 20.

messages:( – hier geven we voor elke regel en voor elk veld een foutmelding weer.

In de code heb ik voor elk item hints geschreven, dus ik denk dat er geen problemen zouden moeten zijn.

Je kunt creëren CSS-stijlen voor fouten: .error ( kleur: rood; )

Dit is wat het resultaat zou moeten zijn:

Voor opmerkingen:

Dit is hoe de bestandssjabloon voor het maken van regels eruit ziet - "myscriptspravil.js":

$(document).ready(function())( $("#formuliernaam").validate(( regels:( // schrijf de regels hier ), berichten:( // bericht hier ) )); ));

Lijst met regels:

verplicht - verplicht veld (waar of onwaar)

e-mail - controleert op juistheid e-mailadressen(waar of onwaar)

url - controleert op juistheid URL-adressen(waar of onwaar)

datum - controleren of de datum correct is (waar of onwaar)

dateISO - controleren of de ISO-datum correct is (waar of onwaar)

cijfers - alleen cijfers (waar of onwaar)

maxlength - maximaal aantal tekens

minlength - minimaal aantal tekens

bereiklengte - aantal tekens van en tot (bereiklengte: )

bereik - het getal moet binnen het bereik van en tot (bereik: ) liggen

maximaal - maximale waarde cijfers

min- minimale waarde cijfers

U kunt de documentatie voor de plug-in en de regels bekijken.

Vond je het bericht leuk? Help anderen dit artikel te leren kennen door op de sociale media-knop ↓↓↓ te klikken

Ontvang blog-updates!!! Abonneren:

Populaire artikelen: 18 Reacties op commentaar - Het controleren van de invulling van formuliervelden met jQuery gebruiken

Uhh, ik begrijp dat het onderwerp noodzakelijk is. En ik wil dat de robots tijdens de registratie worden geëlimineerd, maar hoe ik dit moet integreren, is mij een raadsel. Ik zie deze boter-kaas-en-eieren en ogen tegelijk in een bos...

Ljoedmila, kan ik je ergens mee helpen?

Ljoedmila Lao antwoordt:
07/03/2015 om 09:16

Het grootste probleem met bots dat mij zorgen baart, is hun registratie op mijn site. Ik heb het beperkingsprogramma ingesteld, en extra velden Ik heb het geïntroduceerd, maar het kon ze niets schelen.

Waarom moet je je registreren op een blog?
Probeer captcha.

Ljoedmila Lao antwoordt:
07/03/2015 om 10:20

Ik heb een onzichtbare captcha geïnstalleerd. bespaart u spamreacties, maar helpt u niet bij de registratie...

en ook - hoe kunt u het registratiepunt uit de toegang verwijderen?
Ik heb het gewoon af en toe nodig, dus heb ik onlangs een nieuwe auteur op de site geaccepteerd. In de toekomst zal er ook een redacteur nodig zijn.

Ga in het beheerdersdashboard naar “Instellingen” => “Algemeen” en schakel het vakje boven “Lidmaatschap” uit (iedereen kan zich registreren).
Een nieuwe auteur of redacteur kan handmatig worden toegevoegd. “Gebruikers” => “Nieuwe toevoegen”.
Om de registratie- en inlogblokkering op de blog op te halen, moet je naar “ verschijning” => “widgets” en verwijder het “Meta” blok.
Schrijf, Lyudmila, of je een volledig antwoord op je vraag hebt ontvangen?! En zorg ervoor dat u schrijft of uw probleem is opgelost!

Ljoedmila Lao antwoordt:
07/03/2015 om 12:44

Stepan!
Yo p r s t)) Ik was deze ongelukkige teek helemaal vergeten, bedankt!! Ik wil de widget niet verwijderen, omdat... Ik ga er zelf doorheen, maar verder kus ik je nog een keer!!! Ze hebben mijn probleem gemakkelijk en eenvoudig opgelost. Ato was het beu om deze bots te verwijderen. gevuld van 10 tot 60 tegelijk.

Hallo! Dus.. Ik heb alles gedaan zoals je hier schreef, maar er gebeurt niets op mijn pagina.. Ik weet niet wat het probleem is, help alstublieft.

Ik begrijp gewoon niet waarom ik drie bibliotheken naar de pagina moet slepen om het formulier te valideren, als native JS dit in drie regels doet, en bovendien de invoer in html5 al lang de vereiste en patroonkenmerken ondersteunt?

Ja, minstens één. Wat is het punt? Bibliotheken, en nog meer raamwerken, kunnen (maar hoeven niet noodzakelijkerwijs) te worden gebruikt als en alleen als er meer dan 2-3 keer vraag zal zijn naar hun VERSCHILLENDE functionaliteit in één oproep.
Dit is een van de ‘gouden regels’ van programmeren, net als het feit dat code in een functie moet worden geplaatst als deze meer dan eens wordt gebruikt.

Wat betreft vereiste, patroon- en andere html-invoerscheidingstekens.
Nou ja, een beetje anders in visuele termen, maar ze vervullen precies dezelfde functie: ze laten de gebruiker niet toe onjuiste gegevens in te voeren. Hoewel, lijkt mij fundamenteel verschil Het heeft geen zin dat het bericht in een pop-upvenster of in een veld naast het blok wordt getoond. Maar het aansluiten van de bibliotheek heeft invloed op de prestaties.
Over het algemeen was het oorspronkelijke bericht gericht op native JS, waarbij de validatie van één veld en de uitvoer van een bericht “op één regel” kunnen worden gedaan.
In pseudocode ziet het er ongeveer zo uit:

InputBlock.onaction do if(inputBlock.inner == patroon) messageBlock.inner = "message_text";

einde

een van de JS-implementaties:

Document.querySelector("input").onchange = function())( if(this.value.match(/(4,)/g)) document.querySelector("label").innerHTML = "Inloggen moet minimaal zijn 4 -x tekens en bestaan ​​alleen uit A-z, A-ab 0-9, punt en koppelteken"; ) In deze zelfstudie wordt beschreven hoe u een JavaScript-formulier

, die controleert of de bezoeker de velden correct heeft ingevuld voordat de gegevens naar de server worden verzonden. We leggen eerst uit waarom formuliervalidatie een nuttige techniek is, en daarna bouwen we een eenvoudig voorbeeld om uit te leggen hoe het werkt.

Waarom moet ik de voltooiing van het formulier controleren? Formuliervalidatie is een proces waarbij formuliergegevens worden geverifieerd voordat ze worden verwerkt. Als uw formulier bijvoorbeeld een veld bevat dat de gebruiker moet invoeren e-mailadres

, wilt u wellicht controleren of het veld compleet is voordat u het formulier verder verwerkt. Er zijn twee hoofdmethoden om de voltooiing van een formulier te controleren: aan de serverzijde (met met behulp van CGI

scripts, ASP, enz.) en aan de clientzijde (meestal wordt JavaScript gebruikt). Validatie aan de serverzijde is veiliger, maar vereist in de meeste gevallen complexere code, terwijl validatie aan de clientzijde eenvoudiger en sneller is (de browser hoeft geen verbinding te maken met de server om het formulier te valideren, dus de gebruiker ontvangt onmiddellijk een reactie als ontbrekende velden die moeten worden ingevuld).

Formuliervalidatie aan de clientzijde. Meestal uitgevoerd met behulp van een ingesloten JavaScript-script.

Formuliervalidatie aan de serverzijde. Meestal gedaan met behulp van een CGI- of ASP-script. IN deze les wij zullen bouwen eenvoudige vorm met validatie aan de clientzijde met met behulp van JavaScript

. U kunt het vervolgens aanpassen aan uw behoeften.

Een eenvoudig formulier met verificatie. Laten we een eenvoudig formulier bouwen met vulcontrole met behulp van een script. Dit formulier

heeft één tekstveld "Uw naam" en een knop voor het verzenden van gegevens. Ons script controleert of de gebruiker zijn naam heeft ingevoerd voordat de gegevens naar de server worden verzonden.

De pagina bevat een JavaScript-functie genaamd validate_form(). Er wordt gecontroleerd of het formulier compleet is. Laten we eerst naar de vorm kijken.

Formulier

Het eerste deel van het formulier is de formuliertag

Het formulier heet contact_form. Met zijn hulp hebben we toegang tot het formulier van JavaScript-functies cheques.

Het formulier gebruikt een postmethode om gegevens naar een stub-htm-bestand te verzenden, dat eenvoudigweg een bericht weergeeft. U kunt zelfs gegevens naar uw CGI-script, ASP-pagina enz. (bijvoorbeeld om post te versturen).

De formuliertag bevat ook een onsubmit-attribuut om de JavaScript-validatiefunctie validate_form() aan te roepen wanneer op de knop Gegevens verzenden wordt geklikt. De functie retourneert een Booleaanse waarde, waarbij true betekent dat de controle is geslaagd en false betekent dat gegevens in de wacht staan. Op deze manier kunnen we voorkomen dat de formuliergegevens worden verzonden als de gebruiker deze niet correct heeft ingevuld.

De rest van de formuliercode voegt het invoerveld contactnaam en de knop "Gegevens verzenden" toe:

Voer uw naam in.

Jouw naam:

validate_form() functie

De formuliervalidatiefunctie validate_form() is ingebouwd in de head-sectie aan het begin van de pagina:

De eerste regel () vertelt de browser wat er daarna komt JavaScript-code, en de HTML-opmerking (

De methode die we gebruikten om een ​​functie aan te roepen via de onsubmit-gebeurtenis vereist de terugkeer van een van de logische waarden: true of false als resultaat van de functie. En afhankelijk van deze waarde wordt het formulier wel of niet verzonden.

Laten we nu proberen een verificatiefunctie te schrijven die aan dit specifieke formulier is gekoppeld. Zoals u zich herinnert, hoeven we slechts twee velden in te vullen: de naam van de bezoeker en die van hem e-mailadres. Het eenvoudigste is om de inhoud van elk van de verplichte velden te controleren op afwezigheid van tekst:

< script language = "javascript" >

Zoals u kunt zien, bestaat de verificatiefunctie uit twee identieke blokken, die alleen verschillen in de naam van het veld dat wordt gecontroleerd. Laten we elke regel in deze blokken becommentariëren:

Eerst controleren we of dit veld leeg is. En als dit zo is, dan
een foutmelding weergeven met behulp van de ingebouwde waarschuwingsfuncties(). Nadat de gebruiker het venster heeft gesloten, kunnen we
Laten we de focus()-methode gebruiken en de cursor naar het foutieve veld verplaatsen. En tot slot
Laten we de functie afsluiten door de succesvlag op false te zetten.
Als het te controleren veld niet leeg was, wordt het bijbehorende blok eenvoudigweg overgeslagen. Als alle controleblokken worden overgeslagen, retourneert de functie als resultaat true, wat duidt op een succesvolle controle.

Universele verificatiefunctie

Als we slechts twee of drie velden hoeven te controleren, kunnen we deze methode van “één voor één” nog steeds accepteren, maar wat als het er enkele tientallen zijn? Maar dit is niet ongewoon, vooral bij complexe vragenlijsten. Daarom passen we onze functie enigszins aan, zodat deze niet afhankelijk is van het aantal velden dat wordt gecontroleerd.

Allereerst zullen we een array maken waarin we de namen vermelden van alle velden die verificatie vereisen:

Vereist = nieuwe array("naam", "e-mail");

Met deze aanpak kunnen we heel eenvoudig de lijst met verplichte velden toevoegen en wijzigen zonder de code van de functie zelf direct te wijzigen.

Naast de hierboven beschreven array zullen we er nog een toevoegen, die de fouttekst voor een specifiek veld zal bevatten:

Required_show = new array("Uw naam", "e-mail");

Dit zal ons in staat stellen de tekst vrij te variëren over fouten en de Russische taal correct te gebruiken, en niet tevreden te zijn met onverteerbare zinsneden als ‘naam niet ingevoerd’.

Omdat er een reeks verplichte velden is, kan de hele controle in een lus worden uitgevoerd. Dit is hoe de aangepaste controlefunctie eruit zou zien:

< script language = "javascript" >

In de loop worden alle formuliervelden gecontroleerd om te zien of ze overeenkomen met de “vereiste” velden. Als er een match optreedt, wordt de controle op dezelfde manier uitgevoerd als hierboven beschreven, maar met één voorbehoud: de introductie van een array met foutmeldingen vereiste een kleine aanpassing van de alert()-functie, dus nu is de fouttekst rechtstreeks afhankelijk van de veldnaam.

Dat is het eigenlijk. Deze functie is vrij universeel en kan met minimale aanpassingen (in wezen de inhoud van twee arrays) aan elke vorm worden aangepast.

Rug

Heel vaak is het nodig om een ​​formulier aan de site toe te voegen, omdat het formulier het meest is populaire manier communicatie tussen de gebruiker en de site, en het is erg belangrijk dat de door de gebruiker ingevoerde gegevens correct zijn. En om ervoor te zorgen dat het formulier met de juiste gegevens wordt verzonden, moet het eerst worden gecontroleerd. En daarom zullen we in dit artikel formuliervalidatie in JavaScript behandelen.

Laten we eerst een formulier maken dat we vervolgens zullen controleren:

Jouw naam:



Uw wachtwoord:



Uw geslacht:




Selecteer nummer:

1
2
3



Jouw bericht:



Ga akkoord met onze regels:




Bestand uploaden:

Dit is het formulier. Ik hoop dat je bekend bent met HTML en ik denk dat het niets kost om uit te leggen. Als er iets niet duidelijk is, kijk dan hoe deze code werkt in de browser.

Laten we het nu hebben over hoe u waarden uit formuliervelden kunt halen. Voordat u ze controleert, moet u immers weten wat de gebruiker daar heeft geschreven. Algemeen beeld om als volgt toegang te krijgen tot het formulierveld:

Document.formuliernaam.veldnaam.waarde;

Dat wil zeggen dat we eerst toegang krijgen tot het Document-object, vervolgens de eigenschap Form (via de formuliernaam), vervolgens de naam van het veld van dit formulier en ten slotte de waarde van het veld. Laten we alle velden uitvoeren die aan deze algemene weergave voldoen:

Var-formulier = document.form1;
document.write(formulier.voornaam.waarde + "
");
document.write(form.pass.waarde + "
");
document.write(formulier.nummer.waarde + "
");
document.write(formulier.bericht.waarde + "
");
document.write(formulier.regels.waarde + "
");
document.write(formulier.hidefield.value + "
");
document.write(formulier.bestandupload.waarde + "
");
document.write(formulier.sub.waarde + "
");
document.write(form.but.value + "
");

Dit zijn allemaal velden die een waarde-eigenschap hebben en op deze manier toegankelijk zijn.

Laten we het nu hebben over een speciaal vormelement: radio. Laten we toegang krijgen tot de radiowaarde:

Var geslacht = (document.form1.sex.checked)?
document.form1.sex.waarde: document.form1.sex.waarde;

Merk op dat we twee radio-elementen hebben die zich in de sex-array bevinden. Hun indices zijn 0 en 1. IN dit script we controleren of ons eerste element is inbegrepen ( gecontroleerd), dan wijzen we de waarde van het eerste element toe, anders wijzen we de waarde van het tweede element toe. Trouwens, als iemand het niet begrijpt: dit is een constructie van de IF-conditieoperator. Je zou het natuurlijk zo kunnen schrijven:

Var-seks;
if (document.form1.sex.checked) sex = document.form1.sex.value;
anders geslacht = document.form1.sex.value;

Nu we toegang hebben tot alle velden, gaan we eindelijk het formulier valideren. Maar laten we eerst het attribuut "onSubmit" toevoegen aan de tag met de waarde "return check(); ". Dit attribuut zal het volgende doen: voordat u het formulier verzendt, roept u een functie aan die true of false moet retourneren. Als het true retourneert, wordt het formulier naar de server verzonden, en als false wordt verzonden, wordt het formulier niet verzonden.

Laten we nu een check()-functie maken, die eerst het hele formulier moet controleren, de gebruiker op de hoogte moet stellen van fouten, en ook true (als het formulier volledig correct is) of false (als het formulier fouten bevat) moet retourneren.

Functiecontrole(formulier) (
var voornaam = formulier.voornaam.waarde;
var pass = formulier.pass.waarde;
var bericht = formulier.bericht.waarde;
var regels = vorm.regels.waarde;
var-bestand = formulier.bestandupload.waarde;
var slecht = "";
if (voornaam.lengte< 3)
slecht += "Naam is te kort" + "\n";
if (voornaam.lengte > 32)
slecht += "Naam is te lang" + "\n";
if (doorgangslengte< 3)
slecht += "Wachtwoord is te kort" + "\n";
als (doorgangslengte > 32)
slecht += "Wachtwoord is te lang" + "\n";
if (berichtlengte< 3)
slecht += "Bericht te kort" + "\n";
als (regels != "aan")
slecht += "Je was het niet eens met de regels" + "\n";
als (bestand.lengte == 0)
bad += "Je hebt geen bestand geselecteerd om te downloaden" + "\n";
als (slecht != "") (
bad = "Het formulier is onjuist ingevuld:" + "\n" + bad;
alert(slecht);
retour vals;
}
retourneer waar;
}

In dit script halen we eerst alle gegevens op die moeten worden gecontroleerd en schrijven deze in variabelen. Vervolgens creëren we een variabele bad , waarin we alle onjuiste gegevens schrijven. Dan is er een hele reeks IF's die de velden in het formulier controleren en eventuele fouten naar de slechte variabele schrijven. Als de slechte variabele vervolgens niet leeg is (dat wil zeggen dat er fouten zijn opgetreden), geven we een venster (alert()) met fouten weer. En we retourneren false zodat het formulier niet wordt verzonden. Als de slechte variabele leeg is, retourneren we eenvoudigweg waar, zodat het formulier ter verwerking naar “handler.php” wordt verzonden.