用 input.value 获取控件当前值(含用户输入),而非 getAttribute('value');多选下拉框需遍历 options 或用 selectedOptions;checkbox/radio 用 checked 判断状态,value 恒为初始值;校验需调用 checkValidity() 并检查 validity 对象。

用 document.getElementById() 读取表单控件的 value
绝大多数时候,你不是在读 HTML 的 value 属性,而是在读控件当前的 value 属性值(即用户输入或脚本设置后的实时值)。value 是 DOM 元素的属性,不是只读的 HTML 属性。
常见错误:直接用 getAttribute('value') 拿初始值,结果用户改了输入框内容却还是返回原始 HTML 里的值。
-
input.value返回当前值(推荐) -
input.getAttribute('value')只返回 HTML 中写的初始值,哪怕用户已修改 - 对
和同样适用.value,别用textContent或innerHTML
处理 多选下拉框
多选下拉框的 value 属性只返回第一个被选中的选项值,不是全部。必须遍历 options 集合判断 selected 状态。
示例:const select = document.getElementById('mySelect');,要获取所有选中值:
const values = Array.from(select.options) .filter(opt => opt.selected) .map(opt => opt.value);
- 别依赖
select.value—— 它只返回一个字符串,且是第一个选中项的值 -
select.selectedOptions是更简洁的替代方案(IE 不支持,现代浏览器 OK) - 如果需要兼容 IE,老老实实用
options+selected循环
checkbox 和 radio 的 value 与勾选状态分离
checkbox 和 radio 的 value 属性是固定的,和是否勾选无关。真正反映用户选择的是 checked 属性。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
常见错误:以为没勾选的 checkbox 的 value 是空字符串或 undefined —— 实际上它的 value 始终是 HTML 里写的那个字符串,不管有没有勾选。
- 判断是否选中用
checkbox.checked,不是checkbox.value - 批量获取所有勾选的 checkbox 值:
document.querySelectorAll('input[type="checkbox"]:checked') - radio 组里,只有被选中的那个才有
checked === true,其余都是false,但它们的value都完整存在
表单提交前校验:别只读 value,还要看 validity
用户可能输了一堆空格、非法邮箱、超出长度限制的内容,光读 value 拿到的是“脏数据”。原生表单验证靠的是 element.validity 对象。
比如:const input = document.getElementById('email');,检查是否通过验证:
if (!input.checkValidity()) {
console.log(input.validationMessage); // 浏览器自动生成的提示
}
-
input.checkValidity()触发验证逻辑,返回布尔值 -
input.validity包含具体失败原因(如validity.valueMissing、validity.typeMismatch) - 注意:某些验证(如
required)只在提交或调用checkValidity()时触发,不是实时监听
表单值读取这件事,表面看只是写一行 .value,但实际得时刻分清“HTML 属性”“DOM 属性”“用户交互状态”“验证状态”这四层含义。漏掉任意一层,都可能在某个边界场景下突然失效。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










