HTML มี การตรวจสอบในตัว ผ่านแอตทริบิวต์ ดังนั้นเบราว์เซอร์จึงปิดกั้นการส่งที่ไม่ถูกต้องและแสดงข้อความ — ไม่ต้องใช้ JavaScript
html
Submit
HTML มี การตรวจสอบในตัว ผ่านแอตทริบิวต์ ดังนั้นเบราว์เซอร์จึงปิดกั้นการส่งที่ไม่ถูกต้องและแสดงข้อความ — ไม่ต้องใช้ JavaScript
Submit
แอตทริบิวต์การตรวจสอบ: required, min/max, minlength/maxlength, pattern (regex) และประเภทนั้นเอง (email, url, number) เมื่อส่ง เบราว์เซอร์จะตรวจสอบพวกเขา หยุดการส่งถ้ามีการล้มเหลว และแสดงฟองเนทีฟบนฟิลด์ไม่ถูกต้องแรก
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) -->
ตรวจสอบเสมอบนเซิร์ฟเวอร์ด้วย — การตรวจสอบไคลเอนต์คือ UX; ผู้ใช้สามารถข้ามได้
การตรวจสอบเนทีฟให้ข้อความแสดงข้อผิดพลาดที่เข้าถึงได้ ข้อความแสดงข้อผิดพลาดที่มีการแปลเป็นภาษาท้องถิ่น และการตอบรับแบบทันทีโดยไม่เสียค่าใช้จ่าย
รวมแอตทริบิวต์เชิงประกาศกับ Constraint Validation API สำหรับกฎที่กำหนดเอง — แต่อย่าไว้วางใจเป็นบรรทัดป้องกันเพียงเท่านั้น เซิร์ฟเวอร์ต้องตรวจสอบเช่นกัน
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค