javascript - 尝试在按键时打印错误消息

Question

当有人在输入字段中输入错误值时，我试图打印一条错误消息，但我不知道该怎么做。如果随机值为 6 并且用户输入 7，则会弹出用户消息，显示“您输入错误”。

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(() => {
  alert(parseInt($("#rnd2").val()) === (key1 + key2))
})



<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>

任何帮助，将不胜感激。这是屏幕截图。需要这样的错误消息

标签： javascriptjquery

Answer 1

我认为这就是你所需要的。

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())

$("#rnd2").on("keyup", (e) => {
  $("#error").hide();
  
  if(parseInt($("#rnd2").val()) !== (key1 + key2)){
    $("#error").show();
  }
  else{
    $("#error").hide();
    $("#not-error").show();
  }
})

#error{
  position : absolute;
bottom: 0;
  background : red;
  display : none
}

#not-error{
  position : absolute;
bottom: 0;
  background : green;
  display : none
  color : white
}

#box{
  position : relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="box">
    <input type="text" id="rnd2">
    <span id="error">You have wrong entry</span>
    <span id="not-error">valid</span>
  </div>
  <input type="submit" id="submit" value="validate">
</form>

<p>Human test <span id="rnd1"></span></p>