Šiame vadove išmoksi, kaip gali kompleksiškai patikrinti savo internetinių formų reikalavimus ir modelį su HTML atributais reikalingais ir šablonu. Šios funkcijos yra ypatingai naudingos užtikrinant, kad vartotojų įvestys atitiktų norimą formatą ir neperduotų tuščių laukų. Tu būsi palydėtas per pagrindinius žingsnius ir pamatysi, kaip efektyviai gali naudoti šiuos atributus savo formose.
Svarbiausios išvados
- Atributas required užtikrina, kad laukelis būtų užpildytas.
- Su atributu pattern galite nustatyti reguliariąjį išraiškos patikrinimą tam tikriems formatams.
- Vartotojams svarbu turėti draugiškus klaidos pranešimus dėl teigiamo naudotojo patyrimo.
Vadovas žingsnis po žingsnio
Naudodami required atributą
Jei norite užtikrinti, kad laukelis būtų privalomas, galite naudoti atributą required. Tiesiog pridėkite šį atributą prie savo žymės. Nereikia nurodyti reikšmės; pakanka nustatyti atributą.

Jei forma yra tuščia ir bandote ją pateikti, naršyklė jums rodo klaidos pranešimą, kad laukelį reikia užpildyti. Taigi, required atributas užtikrina, kad įvestis būtų privaloma.

Vadovavimosi privalomumu su kitais atributais derinys
Be required atributo, galite nustatyti reikšmes šalutiniams niuansams ir maksimaliam ilgiui, ribojančiam naudotojui įvesti simbolių kiekį.

Pavyzdžiui, nurodę, kad būtina įvesti bent 10 simbolių, tai taip pat veikia kartu su required atributu. Jei naudotojas įveda mažiau nei 10 simbolių, validacija nepavyksta.

Įvadas į pattern atributą
Pattern atributas leidžia jums nurodyti konkrečią įvesties patikrinimą naudojant reguliariuosius išrašus. Čia jūs nurodote reguliaraus išraiškos modelį kaip eilutę, kuri turėtų patikrinti įvestą tekstą.

Pavyzdžiui, paprastas Regex modelis būtų, kad naudotojas turi įvesti bet kokią eilutę, nes straipsnyje turi būti "ABC" pabaigoje. Tai galėtų atrodyti taip: .*ABC$.
Nekorektiškų įvesties klaidų pranešimas
Kai naudotojas įveda tekstą, neatitinkantį nurodyto modelio, jis gauna bendrinį klaidos pranešimą, pvz., "prašome atitikti pageidaujamą formatą".

Siekiant padėti naudotojams, svarbu turėti prasmingesnį klaidos pranešimą. Tai galima pasiekti naudojant title atributą. Pavadinimas bus naudotojui rodomas kaip pastaba, kai jis nurodytame lauke užveda pelę.

Naudojimas title atributu, padedant naudotojams
Naudojant title atributą, galite suteikti aiškų atsiliepimą, kokią informaciją laukelis turi laukti. Pavyzdžiui, galėtumėte naudoti pavadinimą "Įveskite ID minus po to sekančiais penkiais skaičiais", kad aiškiai parodytumėte naudotojui, kokios įvesties formos tikimasi.

Specifinių įvesties modelių patikrinimas
Dar vienas pavyzdys yra tikrinimas atitinkamam modeliui, kuris priima tik skaičius. Galite nustatyti regex modelį, kuris prasideda tam tikru priesaga ir leidžia tik penkias skaitmenis.

Jei vartotojas įveda per daug arba per mažai skaičių ar net raides, patikrinimas nepavyks.

Apibendrinimas apie patikrinimą
Apgyvendinimas
Šiame vadove sužinojote, kaip, naudojant reikiamą ir modelį, įgyvendinti sudėtingą patikrinimą interneto formose. Šie aspektai užtikrina, kad vartotojo įvestys atitiktų konkretų reikalavimą ir leidžia pritaikyti klaidos pranešimus vartotojams.
Daugiausia užduodami klausimai
Kokį tikslą turi reikiamasis atributas?Reikiamasis atributas užtikrina, kad prieš siunčiant formą, įvesties laukas turi būti užpildytas.
Kaip naudoti modelio atributą?Modelio atributas leidžia jums taikyti reguliarią išraišką, užtikrinant, kad įvestis atitiktų tam tikrą formatą.
Kaip aiškiau pranešti vartotojams, ką jie turi įvesti?Naudodami atributą "title", galite pateikti naudingą informaciją apie tikėtinas įvestis, rodomas patarime, kai vartotojas veda virš įvesties lauko.