Een van de belangrijkste punten in webontwikkeling en dat soms wordt verwaarloosd of niet de nodige aandacht krijgt, is de formulier validatie en van de velden waaruit ze bestaan, variëren deze validaties van welke waarden ze kunnen accepteren, hun lengte tot het feit of ze nodig zijn of niet.
Deze validaties van de kant van de cliënt in het verleden werden ze uitgevoerd door Javascript omslachtige functies te bouwen om een paar velden te valideren en resultaten te verkrijgen die niet altijd de meest optimale waren, werd er ook voor gekozen om de server kant maar dit gaf de gebruiker geen vriendelijke ervaring, omdat we eerst de gegevens moesten verwerken en moesten wachten op het antwoord van de server om te controleren of al onze gegevens correct waren.
Na een tijd netjes mee te hebben gewerkt Javascript Om allerlei soorten bewerkingen aan de kant van de klant uit te voeren, lijken frameworks dingen gemakkelijker te maken, waaronder een van de meest bekende: jQuery; Met een vooraf gedefinieerde structuur en een schonere en meer optimale manier om dingen te doen, was het mogelijk om alle slechte praktijken achter zich te laten en de ontwikkelaar een veel completere tool te geven om deze operaties te realiseren, inclusief validaties.
Maar ook al jQuery faciliteerde veel operaties aan de kant van de klant, er was nog iets niet ontwikkeld dat het probleem van validaties direct zou aanvallen, daarom is de plug-in van Bootstrap-validator die gebruikmaakt van alle voordelen van jQuery en het raamwerk van HTML5 Y CSS3, Bootstrap.
1. Bootstrap-validator
Bootstrap-validator is een plug-in die is gebaseerd op jQuery Y Bootstrap, het maakt het mogelijk om formulieren te valideren, evenals de elementen erin met een eenvoudige opname van de plug-inbibliotheken en het gebruik van zijn krachtige maar eenvoudige API, dit zonder alle kenmerken die het heeft te vergeten, laten we er een paar bekijken:
- Integratie met lettertypen en stijlen Bootstrap.
- Vooraf gedefinieerde veldvalidaties, waaronder: lengte van de inhoud, datums, creditcards, telefoons, e-mail, onder anderen.
- Aangepaste validaties voor velden.
- Mogelijkheid om meerdere validaties per veld toe te voegen.
- Mogelijkheid om een feedbackpictogram weer te geven op basis van het validatieresultaat.
- Mogelijkheid om berichten te gebruiken in de HTML volgens het validatieresultaat.
Zoals we konden zien, maken deze kenmerken het de nummer één optie om te overwegen voor de implementatie van validaties in onze projecten.
Wat hebben we nodig om het te gebruiken?Om te kunnen gebruiken Bootstrap-validator we moeten opnemen jQuery bij voorkeur in de laatste versie, Bootstrap van jouw versie 3.x en de bestanden .css Y .js uit de boekhandel. Daarnaast hebben we een webserverinstallatie nodig zoals: Wamp als we aan het werk zijn ramen of Lamp in Linux.
2. Validators
Voordat u aan het praktische deel van deze tutorial begint, is het belangrijk om enkele van de belangrijkste validators te kennen die het gebruikt. Bootstrap-validator voor de afhandeling van validaties binnen de formulieren, laten we eens kijken:
base64Valideert een met base-64 gecodeerde tekenreeks.
tussenControleer of de waarde van een veld strikt tussen twee gegeven getallen ligt of niet.
kredietkaartValideer een creditcardnummer.
datumValideer een datum volgens bepaalde opties, waaronder het formaat, een maximum, minimum datum en zelfs door scheidingsteken opvallen.
cijfersRetourneert waar of waar als de waarde alleen getallen bevat.
e-mail adresZoals de naam al aangeeft, valideert het een e-mailadres.
regexpValideert of de gegeven waarde overeenkomt met of overeenkomt met een reguliere expressie van Javascript.
Dit is slechts een kleine greep uit het complete repertoire van validators dat we hebben in Bootstrap-validatorVoor de volledige lijst met validators kunnen we hier invoeren en degene aanvinken die het beste bij onze behoeften past:
3. Login formulier
Een van de belangrijkste aspecten van elke huidige website is de login formulier, waar onze gebruikers met hun gebruikersnaam en wachtwoord onze pagina kunnen betreden en genieten van extra voordelen bij het inloggen.
Bootstrap-validator stelt ons in staat om deze twee velden bovendien te valideren met een paar eenvoudige regels code Bootstrap stelt ons in staat om het een extra touch te geven door ons in staat te stellen op een eenvoudige manier een modaal venster te implementeren, en zo een inlogformulier te bouwen dat er professioneel en prettig uitziet voor de gebruiker.
Aangezien we geen enkele wijziging zullen aanbrengen in de broncode van een van de bovengenoemde bestanden, zullen we ze opnemen uit hun respectievelijke CDN, eerst zullen we de bestanden opnemen .css zo veel van Boosttrap Leuk vinden Bootstrap-validator:
Nu zullen we de bestanden opnemen .js en om een veel schonere structuur te hebben, gaan we de code van onze validaties scheiden in een bestand met de naam validator.js:
Dan maken we gebruik van de voordelen van: Bootstrap om ons modale venster te bouwen, dat alleen door de nodige klassen toe te passen op de elementen waaruit het bestaat, de gewenste functionaliteit wordt toegepast:
login formulier×Laten we eens kijken hoe ons voorbeeld er tot nu toe uitziet wanneer we het in de browser uitvoeren:Log in
gebruikersnaamWachtwoordLog in
We hebben ons modale venster al werkend, samen met ons formulier, nu hoeven we alleen de validaties op te nemen met Bootstrap-validator, hiervoor gaan we a . initialiseren document.klaar in ons bestand validator.js en hierin zullen we de methode . noemen boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({message: 'This value is not valid', feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, velden: {user: {validators: {notEmpty: {message: 'Username is required'}}}, wachtwoord: {validators: {notEmpty: {message: 'Password is required'}}}}} ); Het eerste dat we in deze code moeten opmerken, is het gebruik van de selector om de methode te initialiseren, in dit geval gebruiken we de ID van het formulier dat wordt genoemd login formulier, dit om door de . te gaan DOM-boom en ga naar de items eronder in de hiërarchie. Vervolgens definiëren we een algemeen bericht en de feedbackpictogrammen om ons formulier een visueel tintje te geven in het geval van succes of een fout in de validaties.
Eindelijk hebben we onze validaties en hoe we in één oogopslag kunnen zien dat het iets buitengewoon leesbaars en van een ongeëvenaarde eenvoud is, we geven de naam van de velden van onze formulieren aan en in dit voorbeeld zullen we een enkele validatie gebruiken die die van de verplicht veld, maar zoals we hebben opgemerkt, kunnen er meer dan één per veld zijn.
Laten we in de volgende afbeelding zien hoe ons formulier eruitziet wanneer we proberen de informatie te verzenden zonder de velden te hebben ingevuld:
Hoe we onze validaties zien werken en totdat informatie in de velden is ingevoerd, zal het formulier de indienen Aangezien de knop standaard is uitgeschakeld, laten we in de volgende afbeelding zien hoe ons formulier eruitziet wanneer we de benodigde gegevens invoeren en de feedbackpictogrammen dienovereenkomstig veranderen:
In een paar minuten konden we een inlogformulier bouwen met de respectieve validaties aan de clientzijde, allemaal dankzij Bootstrap-validator.
4. Registratieformulier
Het vorige geval is eenvoudig en best nuttig, maar het is niet het enige dat aanwezig is in de ontwikkelingen, er zijn registratieformulieren die veel meer velden bevatten en de beperkingen met betrekking tot de in te voeren informatie zijn anders.
Dit leverde in het verleden een probleem op aangezien afhankelijk van het aantal velden een teller veld voor veld moest worden uitgevoerd en gevalideerd en wanneer deze teller een bepaald aantal bereikte, betekende dit dat er geen fouten waren, dit zonder de individuele validaties van elk veld, zoals datumnotaties, die alleen getallen of zelfs de lengte van het veld accepteren.
Met Boostrap-validator en de vooraf gedefinieerde validators helpen ons bij deze taak op een eenvoudige en snelle manier, laten we eens kijken:
Eerst zullen we de bestanden opnemen .css Y .js die we in het vorige voorbeeld gebruikten, zullen we daarnaast enkele bibliotheken toevoegen om de datetimepicker van Boosttrap:
Zodra dit is gebeurd, bouwen we ons formulier en geven we elk veld een toepasselijke naam:
Laten we eens kijken hoe dit formulier eruitziet in onze browser:Registratieformulier
NamenachternamenE-mailWachtwoordGeboortedatum*****MannelijkVrouwelijkTelefoonMobiele telefoonCheck in
Voordat we verder gaan met de validaties, is het belangrijk dat we onze datetimepicker hiervoor hoeven we alleen de volgende regels code in ons bestand op te nemen: validator.js en geef het de ID die ons veld heeft in de vorm:
$ (functie () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Laten we eens kijken hoe deze plug-in eruit ziet:
Zoals we konden zien, heeft het formulier gemengde velden, waaronder tekst, wachtwoordvelden, datetimepicker en zelfs keuzerondjes, maar dit is geen probleem voor Bootstrap-validator, we zullen hetzelfde bestand gebruiken validator.js voor validaties hoeven we alleen maar een nieuwe instantie van de methode uit te voeren boostrapValidator met de ID van het nieuwe formulier en daar hetzelfde:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', valideren: 'glyphicon glyphicon-refresh'}, velden: {name: {validators: {notEmpty: {message: 'First name is required'}}}, achternaam: {validators: {notEmpty: {message: 'Last name is required'}}}, e-mail: {validators: {notEmpty: {message: ' Het e-mailadres is verplicht en mag niet leeg zijn '}, emailAddress: {message:' Het e-mailadres is niet geldig '}}}, wachtwoord: {validators: {notEmpty: {message:' Het wachtwoord is vereist en mag niet leeg zijn ' }, stringLength: {min: 8, message: 'Het wachtwoord moet minimaal 8 karakters bevatten'}}}, datetimepicker: {validators: {notEmpty: {message: 'De geboortedatum is verplicht en mag niet leeg zijn'} , date: {format: 'YYYY-MM-DD', message: 'De geboortedatum is niet geldig'}}}, *****: {validators: {notEmpty: {message: 'The **** * is required '}}}, telefoon: {bericht:' De telefoon of is niet geldig ', validators: {notEmpty: {message:' De telefoon is verplicht en mag niet leeg zijn '}, regexp: {regexp: / [0-9] + $ /, bericht:' De telefoon kan alleen bevatten nummers'}}}, telefono_cel: {message: 'The phone is not valid', validators: {regexp: {regexp: / [0-9] + $ /, message: 'The phone can only numbers'} }},}}); We kunnen zien dat voor de eerste twee validaties ze vergelijkbaar zijn met het vorige voorbeeld, maar wanneer we het e-mailveld vinden, zien we dat het de validatie van het vereiste veld heeft en bovendien met de validator e-mail adres We controleren of het een geldige e-mail is, laten we eens kijken hoe deze validatie zich gedraagt:
Met de datumkiezer We hebben geen problemen met het invoeren van datums, maar als we dit op de schoonst mogelijke manier willen ontvangen, kunnen we het formaat valideren zoals we kunnen zien in de volgende validatie waarin we aangeven dat het formaat moet zijn JJJJ-MM-DD waarvoor geldt:
We kunnen zelfs valideren uit hoeveel tekens het wachtwoord mag bestaan Snaarlengte en de optie van min:
Om de kracht van deze plug-in af te maken en te demonstreren, gaan we de telefoon valideren, we kunnen de cijfervalidator gebruiken, maar in dit geval zullen we iets complexers gebruiken, zoals een reguliere expressie en het beste van alles is dat we al een validator hebben voor dat de regexp, Laten we eens kijken hoe het werkt in onze vorm:
Nadat we al hebben getest dat al onze validaties correct werken, gaan we alle informatie in ons formulier corrigeren en kijken hoe het eruit ziet met de juiste informatie:
Hiermee ronden we deze tutorial af, waarin we leerden om de validaties van . te gebruiken Boostrap-validator, een krachtige plug-in die geen installatie of configuratie nodig heeft en waarmee we onze formulieren snel en gemakkelijk kunnen valideren met een paar eenvoudige regels code.
