如何使用JQuery生成随机码并验证输入字段以实现人机验证？

完全没问题，我们可以通过生成随机码并存储在隐藏字段中，再对比用户输入来完成验证。下面是针对你给出的HTML结构的具体实现步骤：

1. 调整HTML结构 #

首先给显示验证码的区域加一个可操作的元素（比如<span>），这样我们能把随机码清晰展示给用户：

<div class="row">
  <div class="col-md-12 form-group">
    Human Test = <span id="captcha_display" style="font-weight: bold; color: #2c3e50;"></span>
  </div>
</div>
<div class="row">
  <div class="col-md-12 form-group">
    <input type="text" value="" placeholder="请输入上方的验证码" class="form-control" name="value_num" required/>
    <input class="input" name="captcha_num_hidden_contact" id="captcha_num_hidden_contact" type="hidden" value=""/>
  </div>
</div>

2. 编写jQuery验证逻辑 #

接下来用jQuery生成随机码、展示给用户、存储到隐藏字段，并在表单提交时验证输入：

$(document).ready(function() {
  // 生成4位随机数字验证码的函数
  function getRandomCaptcha() {
    // 生成1000-9999之间的随机整数，确保是标准4位格式
    return Math.floor(Math.random() * 9000) + 1000;
  }

  // 页面加载完成后初始化验证码
  let currentCaptcha = getRandomCaptcha();
  $('#captcha_display').text(currentCaptcha);
  $('#captcha_num_hidden_contact').val(currentCaptcha);

  // 表单提交时执行验证逻辑
  $('form').on('submit', function(e) {
    const userInput = $('input[name="value_num"]').val().trim();
    const storedCaptcha = $('#captcha_num_hidden_contact').val();

    if (userInput !== storedCaptcha) {
      e.preventDefault(); // 阻止表单提交
      alert('验证码输入错误，请重新输入！');
      // 刷新验证码，避免用户重复尝试同一码
      currentCaptcha = getRandomCaptcha();
      $('#captcha_display').text(currentCaptcha);
      $('#captcha_num_hidden_contact').val(currentCaptcha);
      $('input[name="value_num"]').val(''); // 清空输入框
    }
  });
});

3. 额外优化提示 #

• 如果想要更复杂的验证码（比如字母数字混合），可以扩展getRandomCaptcha函数：

  function getRandomCaptcha() {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let captcha = '';
    for (let i = 0; i < 4; i++) {
      captcha += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return captcha;
  }
  

• 重要提醒：前端验证只是第一道防线，恶意用户可以通过调试工具修改隐藏字段的值。所以一定要在后端再做一次验证——把用户输入和隐藏字段的值一起提交到后端，重新对比，确保验证逻辑的安全性。

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