Selles õpetuses õpid, kuidas luua veebivorme efektiivse kliendipoolse valideerimise abil JavaScriptis. Valideerimine on oluline, et tagada, et kasutaja sisendid oleksid enne serverile saatmist õiged ja täielikud. Arutame erinevaid valideerimise aspekte, sealhulgas HTML5 atribuutide kasutamist ja kasutaja kohandatud valideerimisloogika rakendamist JavaScriptis.
Olulisemad teadmised
- Sisendväli saab osaliselt valideerida HTML5 atribuutide abil.
- JavaScript võimaldab sügavat kohandatud valideerimist.
- Vigade teatised saab dünaamiliselt kujundada, et anda kasutajatele kasulikke juhiseid.
Juhendi samm-sammuline koostamine
Samm 1: Vormi alusraami loomine
Alusta lihtsa HTML-vormiga, mis sisaldab lauset sisestusväljal. Veendu, et lisad esimese valideerimise jaoks pattern-atribuudi.
Samm 2: Lihtsa mustrivalideerimine
HTML-vormis võid kasutada pattern-atribuuti, et tagada, et sisestatud lause lõppeb punktiga. Proovi, kas valideerimine töötab ilma JavaScriptita.
Samm 3: JavaScripti lisamine
Valideerimise täiustamiseks integreeri nüüd JavaScript. Võid kirjutada skripti, mis võtab sisestusvälja ja tagab valideerimise. Alusta change-sündi kuulaja lisamisega.
Samm 4: Valideerimine JavaScriptiga
JavaScripti koodis kontrolli, kas sisestatud väärtus lõppeb tõesti punktiga. Kasuta setCustomValidity meetodit, et kuvada kohandatud veateateid. Kui lause pole kehtiv, anna vastav tagasiside.
Samm 5: Veateade kohandamine
Kujunda veateated konkreetsemaks. Kasuta selleks event.target.value, et teada saada, mida kasutaja sisestas, ja kohanda veateadet dünaamiliselt.
Samm 6: HTML5 valideerimisnäitajate lisamine
Optimeeri oma vormi veelgi, kasutades HTML5 sisseehitatud valideerimise näitajaid. Kontrolli, kas su lause vastab ka pattern-atribuudile ja ühenda see juba olemasoleva JavaScripti valideerimisega.
Samm 7: Valideerimine e-posti aadresside jaoks
Lisa vormile veel üks sisestusväli e-posti aadresside jaoks. Siin tuleb kasuks HTML5 tüübi kontroll, kuid lisa ka kohandatud valideerimine JavaScripti abil.
Samm 8: Sisestuskäitumise optimeerimine
Kasutajate sisestuskäitumise optimeerimiseks muuda change sündi asemel input sündi kuulajaks. Sellega valideeritakse sisend kohe, kui kasutaja veel tippima hakkab.
Samm 9: Dünaamilised veateated
Implementeeri loogika, mis toob veateadetesse spetsiifilist dünaamikat. Anna kasutajale teada, miks tema sisend tagasi lükati, ja anna sellele põhinevaid juhiseid.
Samm 10: Viimane kontroll
Kontrolli lõpuks kõike põhjalikult üle. Testi vormi erinevate sisenditega ja veendu, et kõik võimalikud veaolukorrad on kaetud.
Kokkuvõte
Selles juhendis õppisid, kuidas rakendada lihtsaid, kuid efektiivseid valideeringuid JavaScripti ja HTML5 abil veebivormides. Nägid valideerimise põhialuseid mustrite ja kasutajakohandatud loogika abil ning kuidas anda tagasisidet kasutajatele sisestusvea korral nende kogemuse parandamiseks.
Korduma kippuvad küsimused
Kuidas töötab setCustomValidity meetod?setCustomValidity meetod võimaldab seada kohandatud veateate sisestusväljale, mis kuvatakse, kui valideerimine ebaõnnestub.
Mis vahe on 'change' ja 'input' sündmusel?'input' sündmus käivitub iga kord, kui kasutaja sisestab midagi sisestusvälja, samas kui 'change' sündmus käivitub alles väljalt lahkumisel.
Kuidas kontrollida e-posti välja kehtivust?Kasuta HTML5 tüüpi sobitamise funktsiooni, et tagada, et määratud e-posti aadressid on õiges formaadis ja kuvatakse kergesti valideeritavaid veateateid.
