如何实现输入错误值时弹出自定义错误提示？（附jQuery代码）

我来帮你搞定这个错误提示的功能！你的代码已经有了基础的随机数生成和点击事件，只需要补充判断逻辑和一些细节处理就可以实现需求了，具体步骤如下：

1. 先解决表单默认提交的问题 #

你的按钮是<input type="submit">，点击它会触发表单的默认提交行为，导致页面刷新，所以首先要在点击事件里阻止这个行为，避免页面刷新丢失随机数。

2. 添加输入验证逻辑 #

我们需要获取用户输入的值，先判断是否是有效的数字，再和两个随机数的和对比：

• 如果输入不是有效数字，或者和正确答案不符，就弹出"you have wrong entry"的提示
• 如果输入正确，可以给一个成功提示（可选）

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Human test <span id="rnd1"></span></p>
<form>
  <input type="text" id="rnd2">
  <input type="submit" id="submit" value="validate">
</form>

<script>
function RandomNum(min, max) { 
  return parseInt(Math.random() * (max - min) + min); 
} 
let key1 = RandomNum(1, 10) 
let key2 = RandomNum(1, 10) 
$("#rnd1").html(key1.toString() + " + " + key2.toString()) 

$("#submit").click((event) => {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  // 获取用户输入的值，并转为数字
  const userInput = parseInt($("#rnd2").val());
  const correctSum = key1 + key2;
  
  // 验证输入
  if (isNaN(userInput) || userInput !== correctSum) {
    // 输入错误或非数字时弹出提示
    alert("you have wrong entry");
  } else {
    // 输入正确的提示（可选）
    alert("Correct!");
  }
})
</script>

额外优化建议 #

如果想要更美观的内联提示（类似你提到的截图效果），可以不用原生alert，而是在页面上创建一个提示元素：

<!-- 在表单下方添加提示容器 -->
<div id="error-message" style="color: red; margin-top: 8px; display: none;">you have wrong entry</div>

然后修改JS里的提示逻辑：

if (isNaN(userInput) || userInput !== correctSum) {
  $("#error-message").show();
} else {
  $("#error-message").hide();
  alert("Correct!");
}

这样就能实现更友好的页面内错误提示效果啦。

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