JavaScript中用querySelectorAll获取必填项需用[required]属性选择器匹配input、select、textarea；可扩展data-required="true"或.required类；返回NodeList建议转数组遍历校验。
在 JavaScript 中，用 querySelectorAll 获取所有必填项输入框，核心是利用 HTML 的 required 属性作为选择器依据。只要表单元素（如 input、select、textarea）带有 required 属性，就能被精准选中。
基础写法：直接按 required 属性筛选
最常用且可靠的方式是使用属性选择器 [required]，它匹配所有具有 required 属性的元素（无论属性值是什么）：
const requiredFields = document.querySelectorAll('input[required], select[required], textarea[required]');
-
input[required]匹配所有带required的文本框、单选/复选框等 -
select[required]匹配必填下拉菜单 -
textarea[required]匹配必填多行文本框
兼容更广：包含隐藏域和自定义必填逻辑
有些场景下，开发者会用 data-required="true" 或 class（如 class="required"）标记“逻辑上必填”但未用原生 required 的字段。可扩展选择器覆盖这些情况：
const requiredFields = document.querySelectorAll('input[required], select[required], textarea[required], input[data-required="true"], select[data-required="true"], textarea[data-required="true"], .required');
- 注意：
.required类名需确保只用于真正必填项，避免误选 - 若用
data-required，建议统一值为"true"，便于属性选择器精确匹配
实际使用小技巧
获取到 NodeList 后，常需遍历校验或设样式。推荐转成数组再操作：
立即学习“Java免费学习笔记（深入）”；
const fields = Array.from(document.querySelectorAll('input[required], select[required], textarea[required]'));
fields.forEach(field => {
// 检查是否为空
if (!field.value.trim() && !field.checked && field.type !== 'hidden') {
field.classList.add('error');
}
});
-
Array.from()或[...nodeList]可安全转换 NodeList - 对
checkbox/radio，用field.checked判断；对select，检查field.value是否为空字符串或默认占位值 - 通常跳过
type="hidden"，因它不参与用户输入校验
注意事项
避免常见误区：
- 不要写
[required="true"]—— 原生required是布尔属性，没有值或值为任意非空字符串都生效，正确写法是[required] -
querySelectorAll返回的是静态 NodeList，不随 DOM 动态变化，新增的必填字段需重新调用 - 若页面有多个表单，可限定范围，例如：
form#myForm input[required]
