Question

我正在尝试验证人类行为的输入字段。我可以在JQuery中生成随机代码，然后为输入字段验证此值吗？

<div class="row">
  <div class="col-md-12 form-group">
     Human Test  = 
  </div>
</div>
<div class="row">
  <div class="col-md-12 form-group"><input type="text" value="" placeholder="Human Test" class="form-control" name="value_num" required/>
  <input class="input" name="captcha_num_hidden_contact" id="captcha_num_hidden_contact" type="hidden" value=""/>
</div>

enter image description here

Answer 1

是的，您必须分三部分来完成：

生成随机值（并在某处显示）
获取输入字段的值
将随机值与输入字段的值

以下是一个例子：

// generate a random string
const random = Math.random().toString(36).substr(2, 5).toUpperCase();

// get the input field's value
const input = $('input[name="value_num"]').val();

// compare the two values
if (random === input) {
    alert("Input correct");
} else {
    alert("Input incorrect");
}

我想强调评论中已经提到的内容，这不是验证用户是否是机器人的方法。有更好的服务，例如Google's reCAPTCHA。一个好的经验法则是不要重新发明现有的工具。

Answer 2

这是完整的解决方案。无论如何，我建议你这只是为了学习目的。

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>

生成随机值并将其用于验证

2 个答案: