本文介绍如何使用原生 javascript 对表单进行精准自定义验证：确保 6 个输入框均填入 1–6 范围内的整数，且数值互不重复，提供两种清晰、健壮、可复用的实现方案。
本文介绍如何使用原生 javascript 对表单进行精准自定义验证：确保 6 个输入框均填入 1–6 范围内的整数，且数值互不重复，提供两种清晰、健壮、可复用的实现方案。
在构建需要严格数据约束的表单（如数字排序题、偏好排序、唯一编号分配等）时，仅依赖 HTML5 的 required 或 type="number" 是远远不够的——它们无法保证值域完整性（1–6 全覆盖）与集合唯一性（无重复）。下面将通过两个递进式方案，手把手教你实现专业级的客户端校验逻辑。
✅ 方案一：清晰可调试的显式校验流程
该方案采用逐项解析 + 即时反馈的设计，便于调试和扩展（例如添加字段级高亮、错误提示定位等）：
<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 || !Number.isInteger(num)) { alert(`❌ Invalid input in ${id}: "${value}" — must be an integer between 1 and 6.`); el.focus(); return; } // 检查重复 if (temporary.includes(num)) { alert(`❌ Duplicate value detected: ${num}`); el.focus(); return; } temporary.push(num); } // 最终确认：必须恰好有 6 个合法、不重复的数字 if (temporary.length === 6) { alert('✅ Form is valid! Proceeding...'); // ✅ 此处可安全提交表单：this.submit() 或 fetch() 提交数据 } }; </script>关键优势：每一步校验失败都给出具体字段和原因，支持 focus() 定位错误输入，适合用户友好型交互场景。
Javascript Sdk下载用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
✅ 方案二：简洁函数式风格（一行式逻辑判断）
若追求代码密度与可读性的平衡，可采用函数式组合方式，利用 Set 天然去重特性与数组方法链式调用：
<script> document.getElementById("myForm").onsubmit = function(event) { // 提取所有输入值并转为数字数组（自动过滤空/非法值） const values = Array.from( document.querySelectorAll('input[type="text"]'), el => { const n = Number(el.value.trim()); return Number.isInteger(n) && n >= 1 && n <= 6 ? n : null; } ).filter(n => n !== null); // 仅保留合法数字 // 校验：数量为 6 且无重复（Set 去重后长度不变） const isValid = values.length === 6 && new Set(values).size === 6; if (!isValid) { event.preventDefault(); alert('❌ Invalid form: please enter six unique integers from 1 to 6.'); } else { alert('✅ Valid submission!'); // 可在此调用 this.submit() 或发送 AJAX 请求 } }; </script>注意：此方案对非法输入（如空字符串、abc、3.5）更宽容（直接忽略），适合后台已做强校验、前端仅需快速兜底的场景。
⚠️ 重要注意事项与最佳实践
- 永远不要省略服务端校验：JavaScript 校验可被绕过，所有关键业务逻辑（如唯一性、范围约束）必须在后端二次验证；
- 避免使用 alert() 生产环境：建议改用 Toast 提示、表单内红边框 + 错误文案，提升 UX；
- 增强健壮性：添加 inputmode="numeric" 和 pattern="[1-6]" 提升移动端体验；对 parseInt 使用 radix=10 防止八进制误解析；
- 可访问性（a11y）：为错误状态添加 aria-invalid="true" 和关联 aria-describedby，保障屏幕阅读器支持；
- 扩展建议：如需支持动态增删字段，应将校验逻辑封装为独立函数（如 validateRankingInputs(inputs)），便于复用与测试。
通过以上任一方案，你都能精准满足「6 个输入必须是 1–6 的无重复整数」这一典型业务约束。选择方案一时侧重可控性与调试便利，选择方案二时侧重简洁性与表达力——二者均体现了现代前端校验的核心原则：明确、即时、可恢复、不可绕过（在服务端兜底前提下）。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
