HTML5通过内置属性实现表单验证，提升用户体验。使用required确保字段非空，type限制输入格式（如email、url），pattern配合正则校验自定义规则，min/max控制数值或日期范围，maxlength/minlength限定字符长度；浏览器自动提示错误，也可用JavaScript的checkValidity()和setCustomValidity()自定义错误信息；结合:valid和:invalid伪类可美化验证状态样式，增强交互效果。
HTML5 提供了强大的内置表单验证功能，无需 JavaScript 就能实现基础的数据校验。这对于提升用户体验和减少后端压力非常有帮助。下面介绍如何在 HTML5 中实现在线表单的数据验证。
使用内置属性进行数据验证
HTML5 引入了多个表单属性，可直接在输入字段上设置规则，浏览器会自动执行验证。
- required：指定字段不能为空。例如：<input type="text" required>
- type：不同输入类型自带格式校验。如 email 类型会检查邮箱格式，url 验证网址，number 限制为数字。
- pattern：使用正则表达式定义自定义格式。例如，限制手机号：<input type="text" pattern="[0-9]{11}">
- min 和 max：用于 number 或 date 类型，设定数值或日期范围。
- maxlength 和 minlength：控制输入字符长度。
显示验证错误信息
当用户提交表单且某字段未通过验证时，浏览器会自动弹出提示。你可以通过 JavaScript 获取更细粒度的控制。
- 使用 checkValidity() 方法检测表单或字段是否有效。
- 通过 setCustomValidity() 设置自定义错误消息。例如：
const input = document.getElementById('age');
if (input.value < 18) {
input.setCustomValidity('必须年满18岁');
} else {
input.setCustomValidity('');
}
</script>
结合 CSS 控制验证样式
可以使用伪类来美化验证状态下的输入框外观。
立即学习“前端免费学习笔记（深入）”；
- :valid：匹配通过验证的字段。
- :invalid：匹配未通过验证的字段。
- 例如，给无效输入添加红边框：input:invalid { border: 2px solid red; }
基本上就这些。HTML5 的表单验证简单高效，适合大多数基础场景。虽然不能替代后端验证，但能显著提升前端交互体验。不复杂但容易忽略。
