Šioje pamokoje išmoksite, kaip kurti tinklalapių formas su efektyvia klientų pusės tikrinimu JavaScript kalboje. Tikrinimas yra svarbus, norint užtikrinti, kad vartotojo įvestys būtų teisingos ir pilnos prieš siunčiant duomenis į serverį. Aptarsime įvairius tikrinimo aspektus, įskaitant HTML5 atributų naudojimą bei vartotojo nustatytų tikrinimo logikos įgyvendinimą JavaScript kalboje.
Svarbiausios išvados
- Įvesties laukai gali būti tikrinami dalinai naudojant HTML5 atributus.
- JavaScript leidžia giliai įsitraukti ir nustatyti vartotojo nustatytą tikrinimą.
- Klaidų pranešimai gali būti dinamiški, teikiant naudingus patarimus vartotojams.
Vidinis vadovas
Žingsnis 1: Kūrimo formos pagrindas
Pirma, sukurkite paprastą HTML formą, kurią sudaro laukas sakinio įvedimui. Įsitikinkite, kad įterpiate pattern atributą pirmajam tikrinimui.
Žingsnis 2: Paprastas modelio tikrinimas
HTML formoje galite naudoti pattern atributą, kad užtikrintumėte, jog įvestis baigiasi tašku. Kartą patikrinkite, ar tikrinimas veikia be JavaScript.
Žingsnis 3: Įtraukti JavaScript
Siekdami toliau pagerinti tikrinimą, dabar integruokite JavaScript. Galite parašyti skriptą, kuris pasieks įvesties lauką ir atliks tikrinimą. Pradėkite pridėdami įvykio klausyklės funkciją pakeitimų įvykiui.
Žingsnis 4: Tikrinimas su JavaScript
JavaScript kode patikrinkite, ar įvestas vertimas iš tikrųjų baigiasi tašku. Naudokite setCustomValidity metodą, kad rodytumėte vartotojui pritaikytas klaidų žinutes. Jei sakinys netinka, parodykite atitinkamą atgalinį ryšį.
Žingsnis 5: Priderinti klaidų pranešimus
Nustatykite konkrečias klaidų žinutes. Tam naudokite event.target.value, kad galėtumėte gauti informaciją, ką įvedė vartotojas, ir dinamiškai pritaikykite klaidos pranešimą.
Žingsnis 6: HTML5 tikrinimo metrikų įtraukimas
Toliau patobulinkite savo formą naudodami integruotas HTML5 tikrinimo metrikas. Patikrinkite, ar jūsų sakinys atitinka pattern atributą ir sujunkite jį su jau egzistuojančiu JavaScript tikrinimu.
Žingsnis 7: El. laiškų tikrinimas
Papildykite formą nauju laukeliu el. pašto adresams. Čia naudokite HTML5 tipo tikrinimą, papildykite jį vartotojo nustatyta tikrinimo logika naudojant JavaScript.
Žingsnis 8: Ivesties elgesio optimizavimas
Norint optimizuoti įvesties elgesį vartotojams, pasikeiskite nuo pokyčių į įvestį kaip įvykio klausyklę. Tuo pačiu metu vartotojas įveda, įvestis nedelsiant tikrinama.
Žingsnis 9: Dinaminės klaidų žinutės
Įgyvendinkite logiką, kurioje būtų įtraukta specifinė dinamika į klaidų žinutes. Praneškite vartotojui, kodėl jo įvestis buvo atmesta ir teikite rekomendacijas pagrįstas tuo.
Žingsnis 10: Galutinis patikrinimas
Pabaigai atlikite išsamų patikrinimą. Testuokite formą su skirtingomis įvestimis ir įsitikinkite, kad aptariantys visi galimi klaidų atvejai.
Suvestinė
Šiame vadove išmokote, kaip įgyvendinti paprastus, tačiau efektyvius patikrinimus su JavaScript ir HTML5 tinklalapių formose. Gavote pagrindus, tokius kaip modelis ir vartotojo nustatyta logika, ir tai, kaip duoti atsiliepimus vartotojams dėl įvesties klaidų, kad pagerintų savo patirtį.
Dažniausiai užduodami klausimai
Kaip veikia setCustomValidity metodas?setCustomValidity metodu leidžiama nustatyti vartotojo nustatytą klaidos pranešimą įvesties lauke, kuris bus rodomas, jei validacija nepavyksta.
Kokia skirtumas tarp „change“ ir „input“ įvykių?„Input“ įvykis sušaukiamas kiekvieną kartą, kai vartotojas kažką įveda į įvesties lauką, tuo tarpu „Change“ įvykis sušaukiamas tik palikus lauką.
Kaip galima patikrinti el. pašto lauko validumą?Išnaudokite HTML5 tipo atitikmenų funkciją, kad būtų užtikrinta, jog nurodyti el. pašto adresai yra teisingame formate ir suteikiamos lengvai patikrinamos klaidų žinutės.
