17370845950

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：绑定在
  上，触发时默认会跳转或刷新页面，需用 event.preventDefault() 阻止
• input 或 change：用于实时响应输入，如 input.addEventListener('input', () => { console.log(input.value); })
• blur：失去焦点时校验，适合“离开字段时提示错误”

读取与设置表单值

不同控件获取值的方式略有差异：

• 文本框（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 的触发时机。