本文详解如何为 disc 测试表单添加 javascript 实时校验逻辑，防止用户对同一题目的同一选项（如“daring”）同时选择 most 和 least，通过语义化分组、动态配对追踪与可视化反馈确保数据有效性。
本文详解如何为 disc 测试表单添加 javascript 实时校验逻辑，防止用户对同一题目的同一选项（如“daring”）同时选择 most 和 least，通过语义化分组、动态配对追踪与可视化反馈确保数据有效性。
在 DISC 人格测评类表单中，每道题通常包含若干行为描述词（如 Enthusiastic、Daring），并要求用户为每个词分别指定 MOST（最符合）和 LEAST（最不符合）——二者必须来自不同选项，否则逻辑矛盾。原始代码仅校验是否全部作答，却未阻止用户对同一题的同一特质（如 q1most 和 q1least 均选中 d-*）重复赋值，导致计分失真。
核心解决思路是：按题干维度聚合选择，提取语义标识，检测冲突配对。以下为专业级实现方案：
✅ 1. 语义化分组：从 name 属性提取题号与维度
HTML 中每题的 MOST/LEAST 选项使用统一前缀（如 q1most / q1least），我们可借助正则剥离 most/least 后缀，获得唯一题号标识：
const name = input.name.replace(/(most|least)/gi, ''); // "q1most" → "q1"
该标识作为校验键（key），用于在 pairs 对象中记录本题所有已选维度（如 "d"、"i"）。
✅ 2. 动态配对追踪：用 Set 检测重复维度
每次勾选时，解析 value（如 "d-most"）提取维度字母，并存入对应题号数组：
if (!Array.isArray(pairs[name])) pairs[name] = [];
pairs[name].push(value.replace(/(most|least|-)/gi, '')); // "d-most" → "d"
// 检查是否出现重复维度（即同题 MOST/LEAST 选了同一个字母）
if (pairs[name].length === 2 && new Set(pairs[name]).size === 1) {
alert('不能对同一选项同时选择 MOST 和 LEAST！');
return false;
}
✅ 3. 增强版实现（推荐）：面向对象 + 可视化反馈
为提升可维护性与用户体验，升级为 ES6 Class 架构，并增加 DOM 错误高亮：
class DiscValidator {
constructor() {
this.pairs = {};
this.pttn = /(most|least|-)/gi;
this.errorClass = 'error';
}
logChoice(input) {
const name = input.name.replace(this.pttn, '');
const dim = input.value.replace(this.pttn, '');
if (!Array.isArray(this.pairs[name])) this.pairs[name] = [];
this.pairs[name].push(dim);
// 冲突检测：两选均为同一维度
if (this.pairs[name].length === 2 && this.pairs[name][0] === this.pairs[name][1]) {
this.highlightQuestion(input);
return true; // 冲突发生
}
return false;
}
highlightQuestion(input) {
const questionEl = input.closest('.q');
if (questionEl) {
questionEl.classList.add(this.errorClass);
setTimeout(() => questionEl.classList.remove(this.errorClass), 3000);
}
}
validateAll() {
const checked = document.querySelectorAll('input[type="radio"]:checked');
let hasConflict = false;
checked.forEach(input => {
if (this.logChoice(input)) hasConflict = true;
});
if (hasConflict) {
alert('检测到无效选择：请确保每道题的 MOST 和 LEAST 不指向同一人格维度。');
return false;
}
// 补充：检查是否每题均有且仅有一个 MOST + 一个 LEAST
const totalQuestions = document.querySelectorAll('.q').length;
const totalChecked = checked.length;
if (totalChecked !== totalQuestions * 2) {
alert(`请完成全部 ${totalQuestions} 道题（每题需选择 1 个 MOST 和 1 个 LEAST）`);
return false;
}
return true;
}
}
// 使用示例
document.getElementById('submit').addEventListener('click', () => {
const validator = new DiscValidator();
if (validator.validateAll()) {
DiscModule.processForm(); // 执行原有计算逻辑
}
});
⚠️ 注意事项
-
命名一致性至关重要：确保所有
name属性严格遵循q{N}most/q{N}least模式（如q5most,q5least），否则正则提取会失败。 -
避免全局污染：旧版代码中
pairs = {}在函数内重置易被遗忘；新版建议封装为实例属性，或在每次校验前显式清空。 -
无障碍友好：除弹窗外，应同步添加
aria-live区域或焦点引导，满足 WCAG 标准。 -
服务端二次校验：前端校验仅为体验优化，后端仍需验证提交数据中无
d-most与d-least共存于同一题。
通过以上结构化校验，不仅能精准拦截 MOST/LEAST 冲突，还能将错误定位到具体题目区块，显著提升测评专业性与用户信任度。
