如何高效校验HTML文本/数字输入框的答题正确性？

你在用<input type="text">和<input type="number">制作测验题时，大量重复的if/else语句会导致代码冗余、维护困难，下面是你的原始代码：

原始HTML代码 #

<!--Question 1-->
<label for="a">A cow says =</label>
<input type="text" id="a"/>

<!--Question 2-->
<label for="a">1 + 1 =</label> <!-- 注意：这里for属性应该改为"b"，对应下方input的id -->
<input type="number" id="b"/>

<button onclick="checkQuiz()">Check Quiz</button>

原始JavaScript代码 #

var a = document.getElementById("a")
var b = document.getElementById("b")

function checkQuiz() {
   // Question 1
   if (a.value == "moo") {
      console.log("correct")
   }
   else {
      console.log("wrong")
   }

   // Question 2
   if (b.value == "2") {
      console.log("correct")
   }
   else {
      console.log("wrong")
   }
}

优化方案（原生JavaScript） #

核心思路是把题目ID和对应正确答案存入一个配置对象，通过循环遍历完成验证，彻底避免重复的if/else：

// 配置所有题目：键是input的id，值是正确答案
const quizAnswers = {
  "a": "moo",
  "b": 2 // number类型题目用数字，后续统一转类型比较
};

function checkQuiz() {
  // 遍历每一道题
  Object.entries(quizAnswers).forEach(([inputId, correctAnswer]) => {
    const input = document.getElementById(inputId);
    // 根据input类型处理用户输入：文本去空格，数字转成Number类型
    const userAnswer = input.type === "number" 
      ? Number(input.value) 
      : input.value.trim();
    // 判断对错并输出结果
    const result = userAnswer === correctAnswer ? "correct" : "wrong";
    console.log(`题目${inputId}：${result}`);
  });
}

后续新增题目时，只需要在quizAnswers里添加新的键值对即可，无需修改验证逻辑。

优化方案（jQuery） #

如果你想用jQuery，逻辑和原生一致，只是用jQuery的API简化DOM操作：

const quizAnswers = {
  "a": "moo",
  "b": 2
};

function checkQuiz() {
  // 遍历配置对象
  $.each(quizAnswers, function(inputId, correctAnswer) {
    const $input = $(`#${inputId}`);
    // 处理用户输入
    const userAnswer = $input.attr("type") === "number" 
      ? Number($input.val()) 
      : $input.val().trim();
    // 判断对错
    const result = userAnswer === correctAnswer ? "correct" : "wrong";
    console.log(`题目${inputId}：${result}`);
  });
}

额外注意事项 #

1. 修正原HTML中第二题的labelfor属性为"b"，确保点击label能聚焦到对应input。
2. 对于number类型的input，用户输入的value是字符串，必须转成数字再和数字类型的答案比较，或者直接把配置里的答案写成字符串"2"。
3. 可以给input添加required属性，强制用户完成所有题目后再提交。

内容的提问来源于stack exchange，提问作者Ocean