Το HTML παρέχει ενσωματωμένη επικύρωση μέσω χαρακτηριστικών, επομένως ο browser αποτρέπει τις μη έγκυρες υποβολές και εμφανίζει μηνύματα — δεν απαιτείται JavaScript.
html
Submit
Το HTML παρέχει ενσωματωμένη επικύρωση μέσω χαρακτηριστικών, επομένως ο browser αποτρέπει τις μη έγκυρες υποβολές και εμφανίζει μηνύματα — δεν απαιτείται JavaScript.
Submit
Τα χαρακτηριστικά επικύρωσης: required, min/max, minlength/maxlength, pattern (regex), και ο ίδιος ο τύπος (email, url, number). Κατά την υποβολή, ο browser τα ελέγχει, σταματά την υποβολή αν κάποιο αποτύχει, και εμφανίζει ένα εγγενές bubble στο πρώτο μη έγκυρο πεδίο.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Μπορείτε να διαβάσετε και να προσαρμόσετε την επικύρωση σε 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 σας επιτρέπει να προσθέσετε κανόνες που τα χαρακτηριστικά δεν μπορούν να εκφράσουν (π.χ. "η επιβεβαίωση του κωδικού πρέπει να ταιριάζει").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Πάντα επικυρώνετε και στον server — η επικύρωση στην πλευρά του client είναι για την εμπειρία χρήστη. οι χρήστες μπορούν να την παρακάμψουν.
Η εγγενής επικύρωση σας δίνει προσιτά, τοπικοποιημένα μηνύματα σφάλματος και άμεση ανάδραση δωρεάν.
Συνδυάστε τα δηλωτικά χαρακτηριστικά με το Constraint Validation API για προσαρμοσμένους κανόνες — αλλά μην το εμπιστευθείτε ως τη μόνη γραμμή άμυνας. ο server πρέπει επίσης να επικυρώνει.