Patvirtinimas yra procesas, užtikrinantis, kad duomenys yra teisingi ir išsamūs.
Realiame pavyzdyje tarkime, kad svetainė reikalauja užpildyti registracijos formą, kol gausite visišką prieigą prie šios svetainės. Registracijos puslapyje būtų naudotojo vardo, slaptažodžio, el. Pašto adreso ir pan. Įvesties laukai.
Kai vartotojas pateikia formą, paprastai patvirtinimas įvyktų pirmiausia prieš išsiunčiant išsamią informaciją į serverį. Šiuo patvirtinimu būtų stengiamasi kuo geriau užtikrinti, kad įvesties laukų informacija būtų įvesta tinkamai.
Pavyzdžiui, el. Pašto adresas visada turi būti tokio formato: Šis el. Pašto adresas yra apsaugotas nuo šiukšlų. Norėdami jį peržiūrėti, turite įgalinti „JavaScript“. ; jei kas nors el. pašto ID įveda tik vartotojo vardą, idealiu atveju patvirtinimas turėtų nepavykti. Taigi patvirtinant reikia atlikti šiuos pagrindinius patikrinimus prieš išsamią informaciją siunčiant į serverį tolesniam apdorojimui.
Šioje pamokoje sužinosite
- Formos patvirtinimas naudojant HTML5
- Formos patvirtinimas naudojant $ dirty, $ valid, $ invalid, $ pristine
- Formos patvirtinimas naudojant „AngularJS Auto Validate“
- Vartotojo atsiliepimai naudojant „Ladda“ mygtukus
Formos patvirtinimas naudojant HTML5
Formos patvirtinimas yra išankstinio informacijos, kurią vartotojas įvedė į internetinę formą, prieš ją siunčiant į serverį, procesas. Visada geriau patvirtinti informaciją pačioje kliento pusėje. Taip yra dėl to, kad tai prideda mažiau pridėtinių išlaidų, jei vartotojui vėl reikia pateikti formą, jei įvedama neteisinga informacija.
Pažvelkime, kaip galima patvirtinti formas HTML5.
Mūsų pavyzdyje vartotojui parodysime vieną paprastą registracijos formą, kurioje vartotojas turi įvesti išsamią informaciją, pvz., Vartotojo vardą, slaptažodį, el. Pašto adresą ir amžių.
Formoje bus patvirtinimo valdikliai, užtikrinantys, kad vartotojas tinkamai įves informaciją.
Event Registration Guru99 Global Event
Kodo paaiškinimas:
- Teksto įvesties tipui naudojame atributą „reikalingas“. Tai reiškia, kad pateikiant formą teksto laukelis negali būti tuščias, o teksto laukelyje turėtų būti tam tikras tekstas.
- Kitas įvesties tipas yra slaptažodis. Kadangi įvesties tipas pažymėtas kaip slaptažodis, vartotojui įvedus bet kokį tekstą lauke, jis bus užmaskuotas.
- Kadangi įvesties tipas nurodomas kaip el. Paštas, laukelio tekstas turi atitikti modelį. Šis el. Pašto adresas yra apsaugotas nuo šiukšlų. Norėdami jį peržiūrėti, turite įgalinti „JavaScript“. .
- Kai įvesties tipas pažymimas kaip skaičius, jei vartotojas bando įvesti bet kurį simbolį naudodamas klaviatūrą ar abėcėlę, jis nebus įvestas į teksto laukelį.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Norėdami pamatyti formos tikrinimą, spustelėkite mygtuką Pateikti, ekrane neįvedę jokios informacijos.
Spustelėjus mygtuką „Pateikti“, pasirodys iššokantis langas, kuriame bus patvirtinimo klaida, kurią reikia užpildyti.
Taigi patikrinus valdiklį, kuris buvo pažymėtas kaip reikalingas, klaidos pranešimas bus rodomas, jei vartotojas teksto lauke neįveda jokios vertės.
Kai vartotojas įveda bet kokią reikšmę slaptažodžio valdiklyje, pastebėsite simbolį „*“, naudojamą užmaskuoti įvedamus simbolius.
Tada įveskite neteisingą el. Pašto adresą ir spustelėkite mygtuką „Pateikti“. Spustelėjus mygtuką „Pateikti“, pasirodys iššokantis langas, kuriame bus patvirtinimo klaida, kad lauke turi būti simbolis @.
Taigi patvirtinus valdiklį, kuris buvo pažymėtas kaip el. Pašto valdiklis, klaidos pranešimas bus rodomas, jei vartotojas teksto lauke neįves tinkamo el. Pašto ID.
Galiausiai, kai bandysite įvesti bet kokius simbolius amžiaus teksto valdiklyje, jie nebus įvesti ekrane. Valdiklis reikšmę užpildys tik tada, kai į valdiklį bus įvestas skaičius.
Formos patvirtinimas naudojant $ dirty, $ valid, $ invalid, $ pristine
„AngularJS“ suteikia papildomų savybių, kurias reikia patvirtinti. „AngularJS“ pateikia šias valdiklių savybes patvirtinimo tikslais
- $ dirty - vartotojas sąveikauja su valdikliu
- $ valid - lauko turinys galioja
- $ invalid - lauko turinys neteisingas
- $ pristine - vartotojas dar nebendravo su valdikliu
Toliau pateikiami žingsniai, kuriuos reikia atlikti norint atlikti kampinį patvirtinimą.
1 veiksmas. Deklaruodami formą naudokite ypatybę be patvirtinimo. Ši savybė HTML5 nurodo, kad patvirtinimą atliks „AngularJS“.
2 žingsnis) Įsitikinkite, kad formoje yra apibrėžtas jos pavadinimas. To priežastis yra ta, kad atliekant kampinį patvirtinimą bus naudojamas formos pavadinimas.
3 žingsnis. Įsitikinkite, kad kiekvienam valdikliui taip pat yra nustatytas jo pavadinimas. Tai daroma todėl, kad atliekant kampinį patvirtinimą bus naudojamas kontrolinis pavadinimas.
4 žingsnis. Naudokite „ng-show“ direktyvą, kad patikrintumėte, ar nėra valdiklių ypatybių $ dirty, $ invalid ir $ valid.
Pažvelkime į pavyzdį, kuriame pateikiami pirmiau minėti veiksmai.
Mūsų pavyzdyje
Mes tiesiog turėsime paprastą teksto lauką, kuriame vartotojui reikia įvesti temos pavadinimą teksto laukelyje. Jei tai nebus padaryta, suveiks patvirtinimo klaida ir vartotojui bus parodytas klaidos pranešimas.
Event Registration Guru99 Global Event
Kodo paaiškinimas:
- Atkreipkite dėmesį, kad mes suteikėme formos pavadinimą „myForm“. To reikia norint pasiekti „AngularJS“ patvirtinimo formos valdiklius.
- Naudojant ypatybę „novalidate“, užtikrinant, kad HTML forma leistų „AngularJS“ atlikti patvirtinimą.
- Mes naudojame „ng-show“ direktyvą, kad patikrintume ypatybes „$ dirty“ ir „$ invalid“. Tai reiškia, kad jei teksto laukelis buvo modifikuotas, tada „$ dirty“ savybės vertė bus teisinga. Be to, tuo atveju, kai teksto laukelio vertė yra nulinė, ypatybė „$ invalid“ taps tiesa. Taigi, jei abi savybės yra teisingos, tada valdyti nepavyks. Taigi, jei abi vertės yra teisingos, „ng-show“ taip pat taps teisinga ir bus rodomas diapazono valdymas su raudonais simboliais.
- Šiuo metu mes tikriname ypatybę „$ error“, kuri taip pat vertinama kaip teisinga, nes valdikliui minėjome, kad vertė turėtų būti įvesta valdikliui. Tokiu atveju, kai nėra duomenų, įvestų į teksto laukelį, tarpatramio valdiklyje bus rodomas tekstas „Vartotojo vardas reikalingas“.
- Jei teksto laukelio valdymo vertė neteisinga, mes taip pat norime išjungti mygtuką „Pateikti“, kad vartotojas negalėtų pateikti formos. Valdikliui naudojame ypatybę „ng-invalid“, kad tai padarytume pagal sąlyginio valdymo ypatybių „$ dirty“ ir „$ invalid“ vertę.
- Valdiklyje mes tiesiog nustatome pradinę teksto dėžės vertės vertę į tekstą „AngularJS“. Tai daroma tik norint nustatyti tam tikrą numatytąją teksto laukelio vertę, kai pirmą kartą rodoma forma. Tai geriau parodo, kaip atliekamas teksto laukelio patvirtinimas.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Kai iš pradžių rodoma forma, teksto laukelyje rodoma „AngularJS“ reikšmė ir įjungtas „pateikti“ mygtukas. Kai tik pašalinsite tekstą iš valdiklio, bus įjungtas patvirtinimo klaidos pranešimas ir išjungtas mygtukas Pateikti.
Pirmiau pateiktoje ekrano kopijoje rodomi du dalykai
- Pateikti mygtukas yra išjungtas
- Temos pavadinimo teksto laukelyje nėra temos pavadinimo. Taigi, jis suaktyvina klaidos pranešimą „Vartotojo vardas yra būtinas“.
Formos patvirtinimas naudojant „AngularJS Auto Validate“
„AngularJS“ yra galimybė automatiškai patvirtinti visus formos valdiklius nereikalaujant rašyti tinkinto patvirtinimo kodo. Tai galima padaryti įtraukiant pasirinktinį modulį, vadinamą „jcs-AutoValidate“.
Įdiegus šį modulį, jums nereikia įdėti jokio specialaus kodo, kad atliktumėte patvirtinimą arba rodytumėte klaidų pranešimus. Visa tai tvarko kodas, esantis „JCS-AutoValidate“.
Pažvelkime į paprastą pavyzdį, kaip tai pasiekti.
Šiame pavyzdyje
Mes tiesiog turėsime paprastą formą su teksto laukelio valdikliu, kuris yra privalomas laukas. Jei šis valdiklis nėra užpildytas, turėtų būti parodytas klaidos pranešimas.
Event Registration Guru99 Event
Kodo paaiškinimas:
- Pirmiausia turime įtraukti scenarijų „jcs-auto-validate.js“, kuriame yra visos automatinio patvirtinimo funkcijos.
- Turime užtikrinti, kad kiekvienas elementas, įskaitant „div“ žymą, būtų priskirtas „form-group“ klasei.
- Taip pat reikia užtikrinti, kad kiekvienas elementas (kuris yra HTML elementas, pvz., Įvesties valdymas, įtempimo valdymas, „div“ valdymas ir kt.), Pvz., Įvesties valdikliai, taip pat būtų priskirti formų grupės klasei.
- Įtraukite „jcs-autovalidate“ į savo „AngularJS JS“ modulį.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Pagal numatytuosius nustatymus, kai paleidžiate kodą, aukščiau pateikta forma bus rodoma pagal HTML kodą.
Jei bandysite pateikti formą, pasirodys klaidos pranešimas: „Šis laukas yra būtinas“. Visa tai atlieka JCS-AutoValidate parinktis.
Vartotojo atsiliepimai su „Ladda“ mygtukais
Mygtukai „ladda“ yra speciali sistema, sukurta mygtukams, esantiems ant „JavaScript“, kad mygtukai būtų vizualiai paspaudžiami.
Taigi, jei mygtukui bus suteiktas „ladda“ atributas ir jis bus paspaustas, bus parodytas sukimo efektas. Be to, mygtukui galimi skirtingi duomenų stiliai, suteikiantys papildomų vaizdinių efektų.
Pažvelkime į pavyzdį, kaip matyti „ladda“ mygtukus. Mes tiesiog pamatysime paprastą formą, kurioje yra pateikimo mygtukas. Paspaudus mygtuką, mygtuke bus parodytas sukimo efektas.
Event Registration Guru99 Event
Kodo paaiškinimas:
- Mes naudojame „ng-pateikti“ direktyvą, norėdami iškviesti funkciją, vadinamą „pateikti“. Ši funkcija bus naudojama norint pakeisti pateikimo mygtuko „Ladda“ atributą.
- „Ladda“ atributas yra specialus „Ladda“ sistemos atributas. Būtent šis atributas valdymui prideda sukimo efektą. Pateikiamam kintamajam nustatome „Ladda“ atributo vertę.
- Duomenų stiliaus ypatybė vėlgi yra papildomas „ladda“ sistemos atributas, kuris tiesiog prideda kitokį vaizdinį efektą prie pateikimo mygtuko.
- Kad „Ladda“ sistema veiktų, „AngularJS-ladda“ modulį reikia pridėti prie programos „AngularJS.JS“.
- Iš pradžių mes nustatome ir nustatome kintamojo, vadinamo „pateikimas“, reikšmę į „false“. Ši reikšmė nustatoma pateikimo mygtuko „ladda“ atributui. Iš pradžių nustatydami tai klaidingai, mes sakome, kad dar nenorime, kad mygtukas „Pateikti“ dar turėtų „ladda“ efektą.
- Mes deklaruojame funkciją, kuri yra iškviečiama paspaudus mygtuką „Pateikti“. Šioje funkcijoje „pateikimą“ nustatome kaip teisingą. Dėl to „Ladda“ efektas bus taikomas pateikimo mygtukui.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Kai forma iš pradžių rodoma, pateikimo mygtukas rodomas paprasta forma.
Paspaudus mygtuką „Pateikti“, valdiklyje pateiktas kintamasis nustatomas kaip „tiesa“. Ši vertė perduodama pateikimo mygtuko „ladda“ atributui, kuris sukelia mygtuko sukimo efektą.
Santrauka
- Tikrinti teksto laukelio HTML valdiklius galima naudojant „reikalingą“ atributą.
- HTML5 yra pridėta naujų valdiklių, tokių kaip slaptažodis, el. Pašto adresas ir numeris, suteikiantys jų pačių patvirtinimų rinkinį.
- Formos patvirtinimas „AngularJS“ yra pasirūpintas, žiūrint į formos valdiklio $ dirty, $ valid, $ invalid ir $ pirmykštes reikšmes.
- Automatinį patvirtinimą „AngularJS“ programose taip pat galima pasiekti naudojant JCS automatinio patvirtinimo modulį.
- „Ladda“ mygtukus galima pridėti prie „Angular.js“ programos, kad paspaudus mygtuką vartotojui būtų suteikta šiek tiek patobulinta vizualinė aplinka.
