本文介绍如何使用原生 javascript 为表单实现精准的自定义验证逻辑：确保 6 个输入框中分别填入 1 至 6 的整数，且无重复、无遗漏、无越界值。
本文介绍如何使用原生 javascript 为表单实现精准的自定义验证逻辑：确保 6 个输入框中分别填入 1 至 6 的整数，且无重复、无遗漏、无越界值。
在 Web 表单开发中，内置的 required 或 type="number" 等基础校验往往无法满足业务级约束（如“必须是 1–6 的全排列”）。此时需编写自定义验证逻辑。核心挑战在于：既要校验每个值是否在 [1, 6] 范围内，又要确保六个值互不重复且恰好覆盖全部整数——这本质上是一个长度为 6 的无重复整数集合校验。
以下提供两种清晰、可维护的实现方案，均基于原生 JavaScript，无需第三方库。
✅ 方案一：显式遍历 + 即时反馈（推荐用于调试与用户引导）
该方案逐个读取输入、即时校验并给出明确错误提示（如“重复值：3”或“无效值：0”），利于用户快速修正：
<form id="myForm">
<input type="text" id="txt_1" placeholder="第1位"><br>
<input type="text" id="txt_2" placeholder="第2位"><br>
<input type="text" id="txt_3" placeholder="第3位"><br>
<input type="text" id="txt_4" placeholder="第4位"><br>
<input type="text" id="txt_5" placeholder="第5位"><br>
<input type="text" id="txt_6" placeholder="第6位"><br>
<input type="submit" value="提交">
</form>
<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>优势：错误定位精准、用户体验友好；支持空值/非数字/越界值的细粒度提示；便于后续扩展（如高亮错误输入框）。
立即学习“Java免费学习笔记（深入）”；
✅ 方案二：函数式风格（简洁高效，适合生产环境）
若追求代码简洁与性能，可采用数组方法链式处理，利用 Set 天然去重特性进行批量校验：
<form id="myForm">
<input type="text" id="txt_1"><br>
<input type="text" id="txt_2"><br>
<input type="text" id="txt_3"><br>
<input type="text" id="txt_4"><br>
<input type="text" id="txt_5"><br>
<input type="text" id="txt_6"><br>
<input type="submit" value="提交">
</form>
<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 失效，且无法检测重复；
- 服务端必须二次校验：前端验证仅为用户体验优化，所有关键业务逻辑必须在后端复核；
- 增强可访问性：生产环境建议配合 <label>、aria-invalid 和实时校验提示（而非仅提交时触发）。
通过以上任一方案，你都能稳健实现“1–6 全排列”这一典型业务规则校验。选择方案一时侧重调试与用户引导，选择方案二时侧重代码简洁与执行效率——二者均符合现代前端工程实践标准。
