Vienas iš svarbiausių žiniatinklio kūrimo punktų, kuris kartais yra ignoruojamas arba neskiriamas reikiamas dėmesys, yra formos patvirtinimas ir juos sudarančiuose laukuose šie patvirtinimai svyruoja nuo to, kokias vertes jie gali priimti, jų ilgio ir fakto, ar jie yra būtini, ar ne.
Šie patvirtinimai kliento pusėje anksčiau juos vykdė Javascript kuriant sudėtingas funkcijas, siekiant patvirtinti kelis laukus ir gauti ne visada optimaliausius rezultatus, taip pat buvo pasirinkta patvirtinti serverio pusėje tačiau tai nesuteikė vartotojui draugiškos patirties, nes pirmiausia turėjome apdoroti duomenis ir laukti serverio atsakymo, kad patikrintume, ar visi mūsų duomenys teisingi.
Po tam tikro laiko, kai tvarkingai dirbau Javascript Norint atlikti visų rūšių operacijas kliento pusėje, atrodo, kad rėmai palengvina reikalus, tarp jų ir vienas garsiausių: „jQuery“; Turint iš anksto nustatytą struktūrą ir švaresnį bei optimalų būdą atlikti darbus, buvo galima palikti visas blogas praktikas ir suteikti kūrėjui daug išsamesnį įrankį šioms operacijoms atlikti, įskaitant patvirtinimus.
Bet nors ir „jQuery“ palengvino daugelį operacijų kliento pusėje, dar nebuvo sukurta kažkas, kas tiesiogiai keltų patvirtinimo problemą, todėl papildinys „Bootstrap“ patvirtinimo priemonė kuri naudojasi visais privalumais „jQuery“ ir rėmas HTML5 Y CSS3, Bootstrap.
1. „Bootstrap“ patvirtinimo priemonė
„Bootstrap“ patvirtinimo priemonė yra papildinys, pagrįstas „jQuery“ Y Bootstrap, tai leidžia patvirtinti formas, taip pat joje esančius elementus, tiesiog įtraukiant papildinių bibliotekas ir naudojant galingą, bet paprastą API, nepamirštant visų jo savybių, pažiūrėkime keletą iš jų:
- Integracija su šriftais ir stiliais Bootstrap.
- Iš anksto nustatyti lauko patvirtinimai, įskaitant: turinio ilgį, datas, kredito korteles, telefonus, el.
- Tinkinti laukų patvirtinimai.
- Galimybė pridėti kelis patvirtinimus viename lauke.
- Galimybė rodyti atsiliepimo piktogramą pagal patvirtinimo rezultatą.
- Galimybė naudoti pranešimus HTML pagal patvirtinimo rezultatą.
Kaip matėme, dėl šių savybių tai yra pirmoji galimybė, kurią reikia apsvarstyti įgyvendinant mūsų projektų patvirtinimus.
Ko mums reikia, kad ja pasinaudotume?Kad būtų galima naudotis „Bootstrap“ patvirtinimo priemonė turime įtraukti „jQuery“ pageidautina naujausioje versijoje, Bootstrap iš tavo versijos 3.x ir failus .css Y .js iš knygyno. Be to, turėsime įdiegti žiniatinklio serverį, pvz Wamp jei dirbame „Windows“ arba Lempa į Linux.
2. Validatoriai
Prieš pradedant praktinę šios pamokos dalį, svarbu žinoti kai kuriuos svarbiausius jos naudojamus patvirtintojus. „Bootstrap“ patvirtinimo priemonė kaip tvarkyti patvirtinimus formose, pažiūrėkime:
bazė64Patvirtina 64 bazės koduotą simbolių eilutę.
tarpPatikrinkite, ar lauko vertė yra griežtai tarp dviejų nurodytų skaičių, ar ne.
kredito kortelėPatvirtinkite kredito kortelės numerį.
dataPatvirtinkite datą pagal tam tikras parinktis, tarp kurių išsiskiria formatas, maksimali, minimali data ir net skiriamieji ženklai.
skaitmenųPateikiama tiesa arba tiesa, jei vertėje yra tik skaičiai.
elektroninio pašto adresasKaip rodo pavadinimas, jis patvirtina el. Pašto adresą.
reguliarusis ekspresasPatvirtinama, ar nurodyta vertė atitinka ar atitinka įprastą išraišką Javascript.
Tai tik nedidelis viso patvirtintojų repertuaro pavyzdys „Bootstrap“ patvirtinimo priemonėNorėdami gauti visą patvirtintojų sąrašą, galime įvesti čia ir patikrinti, kuris geriausiai atitinka mūsų poreikius:
3. Prisijungimo forma
Vienas iš svarbiausių bet kurios dabartinės svetainės aspektų yra prisijungimo forma, kur mūsų vartotojai gali įvesti savo vartotojo vardą ir slaptažodį į mūsų puslapį ir naudotis papildomais privalumais prisijungdami.
„Bootstrap“ patvirtinimo priemonė leidžia mums patvirtinti šiuos du laukus papildomai keliomis paprastomis kodo eilutėmis Bootstrap leidžia mums suteikti jai papildomo prisilietimo, leidžiant mums paprastai įdiegti modalinį langą, taip sukuriant prisijungimo formą, kuri vartotojo akiai atrodys profesionaliai ir maloniai.
Kadangi nekeisime jokių pirmiau minėtų failų šaltinio kodo, juos įtrauksime iš atitinkamų CDN, pirmiausia įtraukime failus .css tiek daug „Boostrap“ Kaip „Bootstrap“ patvirtinimo priemonė:
Dabar mes įtraukiame failus .js ir norėdami turėti daug švaresnę struktūrą, mes atskiriame patvirtinimo kodą faile, pavadintame validator.js:
Tada mes naudosime Bootstrap sukurti mūsų modalinį langą, kuris tik pritaikius reikiamas klases jį sudarantiems elementams, taikomas norimas funkcionalumas:
prisijungimo forma×Pažiūrėkime, kaip mūsų pavyzdys atrodo iki šiol, kai jį paleidžiame naršyklėje:Prisijungti
Vartotojo vardasSlaptažodisPrisijungti
Mūsų modalinis langas jau veikia kartu su mūsų forma, dabar turime tik įtraukti patvirtinimus „Bootstrap“ patvirtinimo priemonė, tam ketiname inicijuoti a dokumentas.paruoštas mūsų byloje validator.js ir tai vadinsime metodu boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({message: 'Ši vertė negalioja', feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, laukai: {vartotojas: {validatoriai: {notEmpty: {message: 'Būtinas vartotojo vardas'}}}, slaptažodis: {validators: {notEmpty: {message: 'Slaptažodis būtinas'}}}}}); Pirmas dalykas, kurį turėtume pastebėti šiame kode, yra parinkiklio naudojimas metodui inicijuoti, šiuo atveju mes naudojame formos, kuri vadinama, ID prisijungimo forma, tai eiti per DOM medis ir pereikite prie žemiau esančių elementų hierarchijoje. Tada mes apibrėžiame bendrą pranešimą ir grįžtamojo ryšio piktogramas, kad vizualiai suteiktume formą, jei patvirtinimai bus sėkmingi ar klaidingi.
Galiausiai, mes turime patvirtinimus ir kaip iš pirmo žvilgsnio galime pamatyti, kad tai yra kažkas labai skaitomo ir nepakartojamo paprastumo, nurodome savo formų laukų pavadinimus ir šiame pavyzdyje naudosime vieną patvirtinimą, kuris bus privalomas laukas, tačiau, kaip mes komentavome, kiekviename lauke gali būti daugiau nei vienas.
Šiame paveikslėlyje pažiūrėkime, kaip atrodo mūsų forma, kai bandome išsiųsti informaciją neužpildę laukų:
Kaip mes matome, kaip veikia mūsų patvirtinimai, ir kol informacija nebus įvesta į laukus, forma neatliks Pateikti Kadangi mygtukas pagal nutylėjimą yra išjungtas, pažiūrėkime šiame paveikslėlyje, kaip atrodo mūsų forma, kai įvedame reikiamus duomenis ir atitinkamai keičiasi atsiliepimų piktogramos:
Per kelias minutes mums pavyko sukurti prisijungimo formą su atitinkamais kliento patvirtinimais „Bootstrap“ patvirtinimo priemonė.
4. Registracijos forma
Ankstesnis atvejis yra paprastas ir gana naudingas, tačiau jis nėra vienintelis renginys, yra registracijos formų, kuriose yra daug daugiau laukų, o apribojimai dėl įvedamos informacijos yra skirtingi.
Anksčiau tai kėlė problemų, nes priklausomai nuo laukų skaičiaus, skaitiklis turėjo būti atliktas ir patvirtintas laukuose, o kai šis skaitiklis pasiekė tam tikrą skaičių, tai reiškia, kad nebuvo klaidų, nepamirštant atskirų patvirtinimų kiekvieną lauką, pvz., datos formatus, kurie priims tik skaičius ar net lauko ilgį.
Su „Boostrap“ patvirtinimo priemonė ir jo iš anksto nustatyti validatoriai padeda mums atlikti šią užduotį paprastai ir greitai, pažiūrėkime:
Pirmiausia įtraukime failus .css Y .js kurį naudojome ankstesniame pavyzdyje, be to, įtraukime kai kurias bibliotekas, kad galėtume naudoti datos laiko rinkiklis apie „Boostrap“:
Kai tai bus padaryta, mes suformuosime formą ir kiekvienam laukui suteiksime tinkamą pavadinimą:
Pažiūrėkime, kaip ši forma atrodo mūsų naršyklėje:Registracijos forma
VardaiPavardėsPaštuSlaptažodisGimimo data*****PatinasMoteriškaTelefonasMobilusis telefonasĮsiregistruoti
Prieš pereinant prie patvirtinimo, svarbu pateikti savo datos laiko rinkiklis tam mums tereikia į savo failą įtraukti šias kodo eilutes validator.js ir pateikite jam ID, kurį turi mūsų laukas tokia forma:
$ (function () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Pažiūrėkime, kaip atrodo šis papildinys:
Kaip matėme, formoje yra įvairių laukų, įskaitant tekstą, slaptažodžio laukus, datos ir laiko rinkiklį ir net radijo mygtukus, tačiau tai nėra problema „Bootstrap“ patvirtinimo priemonė, naudosime tą patį failą validator.js Norėdami patvirtinti, mes tiesiog turime atlikti naują metodo egzempliorių boostrapValidator su naujos formos ID ir ten yra tas pats:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'}, laukai: {name: {validators: {notEmpty: {message: 'Vardas būtinas'}}}, pavardė: {validators: {notEmpty: {message: 'Pavardė būtina'}}}, el. paštas: {validators: {notEmpty: {message: ' El. Pašto adresas yra būtinas ir negali būti tuščias '}, emailAddress: {message:' The email is not valid '}}}, slaptažodis: {validators: {notEmpty: {message:' Slaptažodis yra būtinas ir negali būti tuščias '}, stringLength: {min: 8, message: 'Slaptažodyje turi būti bent 8 simboliai'}}}, datetimepicker: {validators: {notEmpty: {message: 'Gimimo data yra būtina ir negali būti tuščia'}, data: {format: 'YYYY-MM-DD', message: 'Gimimo data negalioja'}}}, *****: {validators: {notEmpty: {message: '**** '}}}, telefonas: {message:' Telefonas arba negalioja ', validatoriai: {notEmpty: {message:' Telefonas reikalingas ir negali būti tuščias '}, regexp: {regexp: / [0-9] + $ /, pranešimas: „Telefonas gali būti tik yra numeriai '}}}, telefono_cel: {pranešimas: „Telefonas negalioja“, patvirtintojai: {regexp: {regexp: / [0-9] + $ /, pranešimas: „Telefone gali būti tik numeriai“} }},}}); Matome, kad per pirmuosius du patvirtinimus jie yra panašūs į ankstesnį pavyzdį, tačiau radę el. Pašto lauką matome, kad jis patvirtina reikiamą lauką ir papildomai su tikrintuvu elektroninio pašto adresas Patvirtiname, kad tai galiojantis el. Pašto adresas, pažiūrėkime, kaip veikia šis patvirtinimas:
Su datų rinkiklis Mes neturime problemų įvesdami datas, tačiau, jei norime tai gauti kuo švariau, galime patvirtinti formatą, kaip matome toliau pateiktame patvirtinime, kuriame nurodome, kad formatas turėtų būti MMMM-MM-DD kas galioja:
Mes netgi galime patvirtinti, kiek simbolių gali būti slaptažodis stringLength ir galimybė min:
Norėdami užbaigti ir parodyti šio papildinio galią, mes ketiname patvirtinti telefoną, galėtume naudoti skaitmenų tikrintuvą, tačiau šiuo atveju naudosime ką nors sudėtingesnio, pavyzdžiui, įprastą išraišką, o geriausia, kad jau turime patvirtinimo priemonę kad reguliarusis ekspresas, Pažiūrėkime, kaip tai veikia mūsų forma:
Jau išbandę, kad visi mūsų patvirtinimai veikia teisingai, mes ištaisysime visą savo formos informaciją ir pažiūrėsime, kaip ji atrodo, turėdami atitinkamą informaciją:
Tuo baigiame šią mokymo programą, kurioje išmokome naudoti patvirtinimus „Boostrap“ patvirtinimo priemonė, galingas papildinys, kurio nereikia diegti ar konfigūruoti ir kuris leidžia greitai ir lengvai patvirtinti mūsų formas naudojant kelias paprastas kodo eilutes.
