HTML 通过属性提供内置校验,因此浏览器会阻止无效提交并显示提示信息——无需 JavaScript。
html
Submit
校验属性有:required、min/max、minlength/maxlength、pattern(正则)以及类型本身(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) -->
始终也要在服务器端校验——客户端校验只是为了用户体验;用户可以绕过它。
原生校验免费为你提供无障碍、本地化的错误信息和即时反馈。
将声明式属性与约束校验 API 结合起来实现自定义规则——但绝不要把它当作唯一的防线;服务器也必须进行校验。