HTML5通过新增输入类型和属性实现前端验证，如email、url、number等类型自动校验格式，配合required、pattern、min/max等属性可精细控制；示例中表单在输入错误时由浏览器提示并阻止提交，同时支持用JavaScript的checkValidity()方法自定义提示，结合CSS的:invalid/:valid伪类优化样式，提升用户体验，但仍需后端最终校验。
HTML5 引入了多种新的输入类型和内置表单验证机制，使得前端验证更加简单高效，无需 JavaScript 就能实现基础的格式校验。
使用 HTML5 新增输入类型自动触发验证
HTML5 增加了多个语义化的输入类型，浏览器会根据类型自动进行格式检查。常见的新增类型包括：
- email：确保输入内容为有效的邮箱格式
- url：验证输入是否为合法的 URL 地址
- number：只允许数字输入，可设置 min、max 和 step
- tel：用于电话号码（不强制格式，但可在移动端唤起数字键盘）
- date：提供日期选择器，并验证日期格式
- search：用于搜索字段，部分浏览器有清除按钮
示例代码：
<form><label>邮箱：<input type="email" required></label><br>
<label>网站：<input type="url" required></label><br>
<label>年龄：<input type="number" min="18" max="120" required></label><br>
<label>生日：<input type="date" required></label><br>
<button type="submit">提交</button>
</form>
当用户输入不符合格式时，浏览器会弹出提示并阻止表单提交。
立即学习“前端免费学习笔记（深入）”；
利用属性实现更精细的验证控制
HTML5 提供多个属性来增强表单验证能力：
- required：字段必填，留空无法提交
- pattern：使用正则表达式定义自定义格式规则
- min / max：限制数值或日期范围
- maxlength / minlength：限制字符长度
例如，用 pattern 验证中国手机号：
<label>手机号：
<input type="tel" pattern="^1[3-9]\d{9}$" title="请输入有效的11位手机号" required>
</label>
其中 title 属性会在验证失败时显示提示信息。
自定义错误提示与样式优化
虽然浏览器自带提示框，但样式不可控。可通过 JavaScript 结合 checkValidity() 方法自定义提示：
<script>document.querySelector('form').addEventListener('submit', function(e) {
if (!this.checkValidity()) {
e.preventDefault();
alert('请检查填写内容');
}
});
</script>
也可以使用 CSS 伪类美化无效或有效输入框：
input:invalid { border: 2px solid red; }input:valid { border: 2px solid green; }
基本上就这些。HTML5 的表单验证虽不能替代后端校验，但能显著提升用户体验，减少简单错误的提交。实际开发中建议结合 JS 做更复杂验证，同时服务端始终要进行最终校验。
