HTML suteikia integruotą validavimą per atributus, todėl naršyklė blokuoja netinkamus pateikimus ir rodo pranešimus — nereikalingas JavaScript.
html
Submit
HTML suteikia integruotą validavimą per atributus, todėl naršyklė blokuoja netinkamus pateikimus ir rodo pranešimus — nereikalingas JavaScript.
Submit
Validavimo atributai: required, min/max, minlength/maxlength, pattern (regex), ir pats tipas (email, url, number). Pateikiant, naršyklė juos patikrina, sustabdo pateikimą, jei kuris nors nepavyksta, ir rodo gimtąjį burbulą pirmame netinkamame lauke.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Galite skaityti ir tinkinti validavimą JavaScript:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity leidžia pridėti taisykles, kurias atributai negali išreikšti (pvz. "patvirtinti slaptažodis sutampa").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Visada validuokite ir serveryje — kliento validavimas yra skirtas UX; vartotojai gali jį apeiti.
Gimtasis validavimas suteikia jums pasiekiamus, lokalizuotus klaidų pranešimus ir tiesioginį grįžtamąjį ryšį nemokamai.
Deklaratyvius atributus sujunkite su Suvaržymo validavimo API pasirinktinėms taisyklėms — bet niekada nepasitikėkite juo kaip vieninteļe gynybo linija; serveris taip pat turi validuoti.