本文介绍如何使用原生 javascript 为表单实现精准的自定义验证逻辑：确保 6 个输入框中分别填入 1 至 6 的整数，且无重复、无遗漏、无越界值。
本文介绍如何使用原生 javascript 为表单实现精准的自定义验证逻辑：确保 6 个输入框中分别填入 1 至 6 的整数，且无重复、无遗漏、无越界值。
在 Web 表单开发中，内置的 required 或 type="number" 等基础校验往往无法满足业务级约束（如“必须是 1–6 的全排列”）。此时需编写自定义验证逻辑。核心挑战在于：既要校验每个值是否在 [1, 6] 范围内，又要确保六个值互不重复且恰好覆盖全部整数——这本质上是一个长度为 6 的无重复整数集合校验。
以下提供两种清晰、可维护的实现方案，均基于原生 JavaScript，无需第三方库。
✅ 方案一：显式遍历 + 即时反馈（推荐用于调试与用户引导）
该方案逐个读取输入、即时校验并给出明确错误提示（如“重复值：3”或“无效值：0”），利于用户快速修正：
<script> document.getElementById("myForm").onsubmit = function(event) { event.preventDefault(); // 阻止默认提交行为 const temporary = []; const inputIds = ['txt_1', 'txt_2', 'txt_3', 'txt_4', 'txt_5', 'txt_6']; for (const id of inputIds) { const el = document.getElementById(id); const value = el.value.trim(); const num = parseInt(value, 10); // 校验是否为有效整数且在 1–6 范围内 if (!value || isNaN(num) || num < 1 || num > 6) { alert(`❌ 输入错误："${value}" 不是 1–6 的有效整数`); el.focus(); return; } // 校验是否重复 if (temporary.includes(num)) { alert(`❌ 重复值：${num} 已存在`); el.focus(); return; } temporary.push(num); } // 最终确认数量为 6（此步在上述循环中已保证，此处为逻辑兜底） if (temporary.length === 6) { alert("✅ 表单验证通过！所有值为 1–6 的不重复整数。"); // 此处可执行实际提交：this.submit(); 或调用 fetch/AJAX } }; </script>优势：错误定位精准、用户体验友好；支持空值/非数字/越界值的细粒度提示；便于后续扩展（如高亮错误输入框）。
✅ 方案二：函数式风格（简洁高效，适合生产环境）
若追求代码简洁与性能，可采用数组方法链式处理，利用 Set 天然去重特性进行批量校验：
<script> document.getElementById("myForm").onsubmit = function(event) { // 一次性获取所有输入值并转为数字数组 const values = Array.from( document.querySelectorAll('input[type="text"]'), el => parseInt(el.value, 10) ); // 校验函数：是否全在 1–6 范围内 const allInRange = arr => arr.every(n => Number.isInteger(n) && n >= 1 && n <= 6); // 校验函数：是否全部唯一（利用 Set 去重后长度不变） const allUnique = arr => arr.length === new Set(arr).size; if (allInRange(values) && allUnique(values) && values.length === 6) { alert("✅ 验证通过！"); // this.submit(); // 取消注释以启用真实提交 } else { event.preventDefault(); alert("❌ 验证失败：请确保填写 1–6 的不重复整数"); } }; </script>注意：此方案将错误提示合并为统一消息，适合对交互要求不苛刻的场景；parseInt(el.value, 10) 显式指定进制，避免八进制解析陷阱。
⚠️ 关键注意事项
- 始终调用 event.preventDefault()：防止表单在验证失败时意外提交；
- 输入清洗不可少：使用 .trim() 和 parseInt(..., 10) 消除空格与进制歧义；
- 不要依赖数组索引模拟集合（如原始问题中的 temporary[value-1] = ...）：稀疏数组会导致 length 失效，且无法检测重复；
- 服务端必须二次校验：前端验证仅为用户体验优化，所有关键业务逻辑必须在后端复核；
- 增强可访问性：生产环境建议配合
通过以上任一方案，你都能稳健实现“1–6 全排列”这一典型业务规则校验。选择方案一时侧重调试与用户引导，选择方案二时侧重代码简洁与执行效率——二者均符合现代前端工程实践标准。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
