HTML表单验证需结合HTML5属性与JavaScript。1. 使用required、type、min/max、pattern等属性实现基础验证；2. 通过监听submit事件并调用preventDefault()控制提交行为；3. 利用:valid/:invalid伪类与setCustomValidity()方法自定义样式与提示；4. 动态控制字段状态，如disabled、readonly及显示隐藏，提升用户体验。
HTML表单的控制与验证是确保用户输入数据正确性和完整性的关键步骤。通过合理使用HTML属性和JavaScript，可以实现基本到高级的表单控制与验证功能。
1. 使用HTML5内置属性进行基础验证
现代浏览器支持多种HTML5表单属性，无需JavaScript即可完成简单验证。
常用属性包括：- required：标记字段为必填项
- type="email"：自动验证邮箱格式
- type="number"：限制只能输入数字
- min 和 max：设置数值或日期范围
- pattern：使用正则表达式自定义验证规则
- maxlength：限制字符长度
示例：
2. 控制表单提交行为
通过监听表单的 submit 事件，可以阻止默认提交动作并执行自定义逻辑。
立即学习“前端免费学习笔记（深入）”；
常见做法：- 在 form 标签中使用 onsubmit="return false;" 阻止自动提交
- 使用 JavaScript 监听 submit 事件，并调用 event.preventDefault()
- 手动检查所有字段有效性后再决定是否提交
示例：
3. 自定义验证样式与提示信息
利用CSS伪类可以美化无效或有效的输入状态。
CSS 提供了以下伪类：
- :valid：匹配通过验证的输入
- :invalid：匹配未通过验证的输入
- :focus：高亮当前操作的字段
示例样式：
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
outline: none;
}
input:focus:invalid {
border-color: #ff6b6b;
}
结合 setCustomValidity() 方法可设置自定义错误消息：
const input = document.querySelector('input[name="phone"]');
input.addEventListener('input', function() {
if (!/^\d{11}$/.test(this.value)) {
this.setCustomValidity('请输入11位手机号');
} else {
this.setCustomValidity('');
}
});
4. 动态控制输入元素状态
根据业务逻辑动态启用、禁用或隐藏某些字段。
常用方法：- disabled 属性：使输入不可编辑
- readonly 属性：允许查看但不能修改
- 通过JavaScript切换 class 或 style 控制显示隐藏
示例：
// 根据复选框状态启用/禁用其他字段
document.getElementById('agree').addEventListener('change', function() {
document.getElementById('submitBtn').disabled = !this.checked;
});
基本上就这些。结合HTML5原生特性与少量JavaScript，就能构建出体验良好且可靠的表单控制系统。关键是平衡用户体验与数据准确性，避免过度复杂化验证流程。
