JavaScript通过DOM操作表单，核心是获取元素、监听事件（submit/input/blur）、读写值（value/checked）和验证提交；需注意preventDefault及事件时机差异。
JavaScript 通过操作 DOM 来读取、验证、提交和动态控制 HTML 表单，核心是获取表单元素、监听事件、处理用户输入。
获取表单及表单控件
常用方式有三种：
- 用 document.getElementById() 获取单个元素，比如
document.getElementById('username') - 用 document.querySelector() 按 CSS 选择器查找，例如
document.querySelector('form#login')或document.querySelector('[name="email"]') - 用 document.forms 访问页面所有表单，如
document.forms[0]或document.forms['myForm']
监听表单事件
关键事件包括：
-
submit：绑定在
<form></form>上，触发时默认会跳转或刷新页面，需用event.preventDefault()阻止 -
input 或 change：用于实时响应输入，如
input.addEventListener('input', () => { console.log(input.value); }) - blur：失去焦点时校验，适合“离开字段时提示错误”
读取与设置表单值
不同控件获取值的方式略有差异：
立即学习“Java免费学习笔记（深入）”；
- 文本框（
input[type="text"]、textarea）：用element.value - 单选/复选框（
input[type="radio"]、input[type="checkbox"]）：检查element.checked，复选框需遍历所有同名项 - 下拉菜单（
select）：用select.value获取选中值，或select.options[select.selectedIndex].text获取显示文本 - 设置值同理，直接赋值给
.value或.checked即可
验证与提交控制
前端验证不是为了替代后端，而是提升体验：
- 简单校验可用
element.checkValidity()（配合required、type="email"等原生属性） - 自定义规则建议在
submit事件中统一判断，任一失败就preventDefault()并提示 - 提交可走原生提交（让浏览器发请求），也可用
fetch()发送 AJAX，之后手动清空或重置表单：form.reset()
基本上就这些。不复杂但容易忽略细节，比如忘记阻止默认行为，或混淆 input 和 change 的触发时机。
