Viens no vissvarīgākajiem tīmekļa izstrādes punktiem, kas dažreiz tiek atstāts novārtā vai tam netiek pievērsta nepieciešamā uzmanība, ir veidlapas validācija un no laukiem, kas tos ietver, šīs validācijas svārstās no vērtībām, ko tās var pieņemt, to garuma līdz faktam, vai tās ir vajadzīgas vai nav.
Šīs apstiprināšanas klienta pusē agrāk tos veica Javascript veidojot apgrūtinošas funkcijas, lai apstiprinātu dažus laukus un iegūtu rezultātus, kas ne vienmēr bija visoptimālākie, tika izvēlēts arī validēt servera pusē bet tas nedeva lietotājam draudzīgu pieredzi, jo vispirms mums bija jāapstrādā dati un jāgaida servera atbilde, lai pārbaudītu, vai visi mūsu dati ir pareizi.
Pēc kāda laika, kad esmu kārtīgi strādājis Javascript Lai veiktu visu veidu darbības klienta pusē, šķiet, ka sistēmas atvieglo lietas, tostarp vienu no slavenākajiem: jQuery; Izmantojot iepriekš noteiktu struktūru un tīrāku un optimālāku veidu, kā rīkoties, bija iespējams atstāt aiz sevis visu slikto praksi un izstrādātājam piešķirt daudz pilnīgāku rīku, lai sasniegtu šīs darbības, tostarp validācijas.
Bet kaut arī jQuery veicināja daudzas operācijas klienta pusē, kaut kas vēl nebija izstrādāts, kas tieši uzbrūk validācijas jautājumam, tāpēc spraudnis Bootstrap validators kas izmanto visas priekšrocības jQuery un ietvars HTML5 Y CSS3, Bootstrap.
1. Bootstrap validators
Bootstrap validators ir spraudnis, kura pamatā ir jQuery Y Bootstrap, tas ļauj apstiprināt veidlapas, kā arī tajā esošos elementus, vienkārši iekļaujot spraudņu bibliotēkas un izmantojot tās jaudīgo, bet vienkāršo API, neaizmirstot visas tam piemītošās īpašības, apskatīsim dažus no šiem:
- Integrācija ar fontiem un stiliem Bootstrap.
- Iepriekš noteiktas lauku validācijas, kas ietver: satura garumu, datumus, kredītkartes, tālruņus, e -pastu, cita starpā.
- Pielāgotas lauku pārbaudes.
- Iespēja pievienot vairākus apstiprinājumus katram laukam.
- Iespēja parādīt atgriezeniskās saites ikonu atbilstoši validācijas rezultātam.
- Iespēja izmantot ziņojumus HTML saskaņā ar validācijas rezultātu.
Kā mēs redzējām, šīs īpašības padara to par pirmo iespēju, kas jāapsver, lai īstenotu apstiprinājumus mūsu projektos.
Kas mums ir nepieciešams, lai to izmantotu?Lai varētu izmantot Bootstrap validators mums ir jāiekļauj jQuery vēlams jaunākajā versijā, Bootstrap no jūsu versijas 3.x un failus .css Y .js no grāmatnīcas. Turklāt mums būs nepieciešama tāda tīmekļa servera instalēšana kā Wamp ja mēs strādājam pie Windows vai Lampa iekšā Linux.
2. Validatori
Pirms iepazīšanās ar šīs apmācības praktisko daļu, ir svarīgi zināt dažus no vissvarīgākajiem validatoriem, ko tā izmanto. Bootstrap validators lai pārbaudītu validācijas veidlapās, apskatīsim:
bāze64Apstiprina 64 bāzes kodētu rakstzīmju virkni.
starpPārbaudiet, vai lauka vērtība ir stingri starp diviem norādītajiem skaitļiem.
kredītkarteApstipriniet kredītkartes numuru.
datumsApstipriniet datumu atbilstoši noteiktām opcijām, starp kurām izceļas formāts, maksimālais, minimālais datums un pat ar atdalītāju.
cipariAtgriež patiesu vai patiesu, ja vērtībā ir tikai skaitļi.
epasta adreseKā norāda nosaukums, tas apstiprina e -pasta adresi.
regulārā izteiksmeApstiprina, vai dotā vērtība atbilst regulārai izteiksmei vai atbilst tai Javascript.
Šis ir tikai neliels paraugs no visa mūsu apstiprinātāju repertuāra Bootstrap validatorsPilnu validatoru sarakstu mēs varam ievadīt šeit un pārbaudīt to, kas vislabāk atbilst mūsu vajadzībām:
3. Pieteikšanās veidlapa
Viens no vissvarīgākajiem pašreizējās vietnes aspektiem ir pieteikšanās veidlapa, kur mūsu lietotāji var ieiet ar savu lietotājvārdu un paroli mūsu lapā un, piesakoties, baudīt papildu priekšrocības.
Bootstrap validators ļauj mums apstiprināt šos divus laukus, izmantojot dažas vienkāršas koda rindas Bootstrap ļauj tai piešķirt papildu pieskārienu, ļaujot vienkāršā veidā ieviest modālo logu, tādējādi izveidojot pieteikšanās veidlapu, kas lietotāja acīm izskatīsies profesionāli un patīkami.
Tā kā mēs nemainīsim neviena no iepriekšminēto failu avota kodu, mēs tos iekļausim CDN, vispirms mēs iekļausim failus .css tik daudz no Boostrap patīk Bootstrap validators:
Tagad mēs iekļausim failus .js un, lai iegūtu daudz tīrāku struktūru, mēs atdalīsim savu apstiprinājumu kodu failā ar nosaukumu validator.js:
Tad mēs izmantosim priekšrocības Bootstrap lai izveidotu mūsu modālo logu, kas, tikai piemērojot nepieciešamās klases elementiem, kas to veido, tiek izmantota vēlamā funkcionalitāte:
Pieteikšanās veidlapa×Apskatīsim, kā mūsu piemērs izskatās līdz šim, kad to palaižam pārlūkprogrammā:Pieslēgties
LietotājvārdsParolePieslēgties
Mums jau darbojas mūsu modālais logs kopā ar mūsu veidlapu, tagad mums ir jāiekļauj tikai apstiprinājumi Bootstrap validators, šim nolūkam mēs inicializēsim a dokuments.gatavs mūsu failā validator.js un šajā ietvaros mēs sauksim metodi boostrapValidator ():
$ ('# loginForm'). }, lauki: {lietotājs: {validatori: {notEmpty: {message: 'Lietotājvārds ir obligāts'}}}, parole: {validators: {notEmpty: {message: 'Parole ir obligāta'}}}}}); Pirmā lieta, kas mums jāpievērš uzmanība šajā kodā, ir atlasītāja izmantošana metodes inicializēšanai, šajā gadījumā mēs izmantojam veidlapas ID loginForm, tas iet caur DOM koks un nokļūstiet hierarhijā zem vienumiem. Pēc tam mēs definējam vispārīgu ziņojumu un atgriezeniskās saites ikonas, lai mūsu veidlapai piešķirtu vizuālu pieskārienu, ja validācija ir veiksmīga vai kļūdaina.
Visbeidzot, mums ir apstiprinājumi un tas, kā mēs īsumā varam redzēt, ka tas ir kaut kas ārkārtīgi lasāms un nepārspējami vienkāršs, mēs norādām veidlapu lauku nosaukumus un šajā piemērā mēs izmantosim vienu apstiprinājumu, kas būs obligāts lauks, taču, kā mēs komentējām, katrā laukā to var būt vairāk nekā viens.
Tālāk redzamajā attēlā redzēsim, kā izskatās mūsu veidlapa, mēģinot nosūtīt informāciju, neaizpildot laukus:
Kā mēs redzam, kā darbojas mūsu validācijas, un līdz brīdim, kad laukos būs ievadīta informācija, veidlapa neveiks Iesniegt Tā kā poga pēc noklusējuma ir atspējota, redzēsim nākamajā attēlā, kā izskatās mūsu veidlapa, ievadot nepieciešamos datus un attiecīgi mainoties atsauksmju ikonām:
Dažu minūšu laikā mēs, pateicoties, varējām izveidot pieteikšanās veidlapu ar attiecīgajām klienta puses validācijām Bootstrap validators.
4. Reģistrācijas forma
Iepriekšējais gadījums ir vienkāršs un diezgan noderīgs, taču tas nav vienīgais, kas notiek attīstībā, ir reģistrācijas veidlapas, kurās ir daudz vairāk lauku, un ierobežojumi attiecībā uz ievadāmo informāciju ir atšķirīgi.
Agrāk tas radīja problēmu, jo atkarībā no lauku skaita bija jāveic skaitītājs un jāapstiprina pa laukiem, un, kad šis skaitītājs sasniedza noteiktu skaitli, tas nozīmēja, ka nebija kļūdu, neaizmirstot par atsevišķiem apstiprinājumiem. katram laukam, piemēram, datuma formātiem, kas pieņems tikai skaitļus vai pat lauka garumu.
Ar Boostrap validators un tā iepriekš definētie validatori palīdz mums šajā uzdevumā vienkārši un ātri, redzēsim:
Vispirms mēs iekļausim failus .css Y .js ko izmantojām iepriekšējā piemērā, papildus iekļausim dažas bibliotēkas, lai varētu izmantot datuma laika atlasītājs no Boostrap:
Kad tas ir izdarīts, mēs veidojam savu veidlapu un piešķiram katram laukam atbilstošu nosaukumu:
Apskatīsim, kā šī veidlapa izskatās mūsu pārlūkprogrammā:Reģistrācijas forma
VārdiUzvārdiE -pastsParoleDzimšanas datums*****VīrietisSievišķīgaTālrunisMobilais telefonsReģistrēties
Pirms turpināt apstiprināšanu, ir svarīgi, lai mēs izdarītu savu datuma laika atlasītājs šim nolūkam mūsu failā ir jāiekļauj tikai šādas koda rindas validator.js un piešķiriet tai ID, kas ir mūsu laukā, šādā formā:
$ (funkcija () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Apskatīsim, kā izskatās šis spraudnis:
Kā redzējām, veidlapai ir jaukti lauki, tostarp teksts, paroles lauki, datuma un laika atlasītājs un pat radio pogas, taču tā nav problēma Bootstrap validators, mēs izmantosim to pašu failu validator.js apstiprināšanai mums vienkārši jāveic jauns metodes gadījums boostrapValidator ar jaunās veidlapas ID un ietver to pašu:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'}, lauki: {name: {validators: {notEmpty: {message: 'Vārds ir obligāts'}}}, uzvārds: {validators: {notEmpty: {message: 'Uzvārds ir obligāts'}}}, e -pasts: {validators: {notEmpty: {message: ' E -pasta adrese ir obligāta, un tā nedrīkst būt tukša '}, emailAddress: {message:' E -pasta adrese nav derīga '}}}, parole: {validators: {notEmpty: {message:' Parole ir obligāta, un tā nedrīkst būt tukša '}, stringLength: {min: 8, message: 'Parolei jāsatur vismaz 8 rakstzīmes'}}}, datetimepicker: {validators: {notEmpty: {message: 'Dzimšanas datums ir obligāts un nevar būt tukšs'}, datums: {formāts: 'GGGG-MM-DD', ziņojums: 'Dzimšanas datums nav derīgs'}}}, *****: {validators: {notEmpty: {message: '**** '}}}, tālrunis: {ziņojums:' Tālrunis vai nav derīgs ", validators: {notEmpty: {message: 'Tālrunis ir obligāts un nevar būt tukšs'}, regexp: {regexp: / [0-9] + $ /, ziņojums: 'Tālruni var tikai satur numurus '}}}, telefona_cel: {ziņojums:' Tālrunis nav derīgs ', validatori: {regexp: {regexp: / [0-9] + $ /, ziņojums:' Tālrunis var saturēt tikai ciparus '} }},}}); Mēs varam redzēt, ka pirmajās divās pārbaudēs tie ir līdzīgi iepriekšējam piemēram, bet, atrodot e -pasta lauku, mēs redzam, ka tam ir nepieciešamā lauka validācija un papildus ar validatoru epasta adrese Mēs pārbaudām, vai tas ir derīgs e -pasts. Apskatīsim, kā šī validācija darbojas:
Ar datumu atlasītājs Mums nav problēmu ievadīt datumus, taču, ja vēlamies to saņemt pēc iespējas tīrākajā veidā, mēs varam apstiprināt formātu, kā redzams tālāk norādītajā validācijā, kur norādām, ka formātam jābūt GGGG-MM-DD kas derīgs:
Mēs pat varam pārbaudīt, cik daudz rakstzīmju var būt parole stringLength un iespēja min:
Lai pabeigtu un parādītu šī spraudņa spēku, mēs pārbaudīsim tālruni, mēs varētu izmantot ciparu validatoru, taču šajā gadījumā mēs izmantosim kaut ko sarežģītāku, piemēram, regulāru izteiksmi, un labākais ir tas, ka mums jau ir validators ka: regulārā izteiksme, Apskatīsim, kā tas darbojas mūsu formā:
Jau pārbaudot, vai visas mūsu pārbaudes darbojas pareizi, mēs labosim visu informāciju mūsu veidlapā un redzēsim, kā tā izskatās, izmantojot atbilstošo informāciju:
Ar to mēs pabeidzam šo apmācību, kurā mēs iemācījāmies izmantot validācijas Boostrap validators, spēcīgs spraudnis, kuram nav nepieciešama instalēšana vai konfigurēšana un kas ļauj ātri un viegli apstiprināt mūsu veidlapas, izmantojot dažas vienkāršas koda rindiņas.
