every适合必填项校验，因其短路特性可快速判定所有字段是否非空；需将表单元素转为数组后调用，并在回调中分类型处理checkbox、select、radio等边界情况。
为什么 every 适合做必填项校验
Array.prototype.every 天然适合“全量检查”场景：只要有一个元素不满足条件，就立刻返回 false，且不会继续遍历。表单必填项校验的核心诉求正是“所有字段都非空”，而不是收集错误详情——这时候用 every 比 filter 或 reduce 更轻量、语义更清晰。
注意它不关心字段类型或校验规则细节，只依赖你传入的判断函数是否对每个字段返回 true。
怎么把表单字段转成数组并调用 every
常见做法是先提取必填字段的值（或 DOM 元素），再统一判断。关键在于：别直接操作 form.elements 这类类数组对象——它不是真正的数组，不能直接链式调用 every。
- 用
Array.from(form.elements)或[...form.elements]转为数组 - 用
querySelectorAll选中带required属性的输入项，再转数组：Array.from(document.querySelectorAll('input[required], select[required], textarea[required]')) - 确保只取“有值可校验”的字段：跳过
disabled或type="hidden"的元素
示例：
const requiredFields = Array.from(
document.querySelectorAll('input[required]:not(:disabled), select[required]:not(:disabled), textarea[required]:not(:disabled)')
);
const isComplete = requiredFields.every(field => {
if (field.type === 'checkbox' || field.type === 'radio') {
return field.checked;
}
return field.value.trim() !== '';
});
every 容易忽略的边界情况
表单字段类型多样，every 的回调函数若没覆盖全，就会误判。常见漏点：
-
select元素：空选项通常用<option value="">表示，需检查field.value === ''，而非只看field.selectedIndex -
radio组：不能单独检查每个input，得按name分组判断是否有任一被选中（every本身不支持分组，需预处理） - 富文本
contenteditable区域：它的“值”是innerText或textContent，不是value - 日期/时间输入（
type="date"）：空值时value是空字符串，但用户可能选了无效日期（如"invalid"），需额外验证
和 checkValidity() 混用时的冲突点
原生表单校验（form.checkValidity()）会触发浏览器默认提示，而 every 是纯逻辑判断，两者目标一致但行为不同。混用时容易踩坑：
-
checkValidity()对required字段的空值判断更严格（比如会识别type="email"的格式），而every回调里若只写field.value判断，可能绕过格式校验 - 调用
form.reportValidity()会强制聚焦第一个无效字段，干扰你自定义的错误提示逻辑 - 如果字段有
pattern或minlength等约束，仅靠every+value判断无法覆盖，得配合field.validity.valid
真正需要精细控制反馈时机和内容时，every 应只负责“是否全部非空”这一层，更深层校验交给各字段自身的 validity 对象或自定义规则。
