JavaScript新手求助：如何验证人机测试的数字和输入

嘿，作为JavaScript新手，完全理解你想搞定这个简单人机验证的需求～你的PHP已经生成了随机数和正确的和，接下来用JS做前端验证就好，我给你两种实用的方案：

先整理你的现有HTML结构 #

首先把你提供的代码格式化一下，方便后续操作：

<div class="col-md-12 form-group">
    <?php 
        $a_con = rand(0,9); 
        $b_con = rand(0,9); 
    ?>
    Human Test <?php echo $a_con." + ".$b_con?> = 
</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="<?php echo $a_con+$b_con;?>"/>
    </div>
</div>

方案1：表单提交时验证（最基础的需求） #

给你的表单添加提交事件监听，在用户点击提交按钮时检查输入是否正确：

// 获取表单元素（假设你的表单有id="contact-form"，如果没有可以用其他选择器，比如document.querySelector('form')）
const form = document.getElementById('contact-form');
// 获取输入框和隐藏域
const userInput = document.querySelector('input[name="value_num"]');
const correctSum = document.getElementById('captcha_num_hidden_contact');

form.addEventListener('submit', function(e) {
    // 先阻止表单默认提交行为，先做验证
    e.preventDefault();
    
    // 把输入值和正确值都转成数字（输入框和隐藏域的值默认是字符串，直接比较会有问题）
    const inputValue = parseInt(userInput.value.trim(), 10);
    const targetValue = parseInt(correctSum.value, 10);
    
    // 验证逻辑
    if (isNaN(inputValue)) {
        alert('请输入有效的数字！');
        userInput.focus();
        return;
    }
    
    if (inputValue !== targetValue) {
        alert('计算错误，请重新输入！');
        userInput.focus();
        userInput.value = '';
        return;
    }
    
    // 如果验证通过，再提交表单
    form.submit();
});

方案2：实时验证（提升用户体验） #

如果想让用户输入时就知道是否正确，可以给输入框添加blur（失去焦点）或者input（实时输入）事件：

const userInput = document.querySelector('input[name="value_num"]');
const correctSum = document.getElementById('captcha_num_hidden_contact');

// 失去焦点时触发验证
userInput.addEventListener('blur', function() {
    const inputValue = parseInt(this.value.trim(), 10);
    const targetValue = parseInt(correctSum.value, 10);
    
    if (isNaN(inputValue)) {
        this.style.borderColor = 'red';
        alert('请输入有效的数字！');
        return;
    }
    
    if (inputValue === targetValue) {
        this.style.borderColor = 'green';
        // 也可以在输入框旁边加个提示文字，比如：
        // this.insertAdjacentHTML('afterend', '<span style="color:green;">✓ 正确！</span>');
    } else {
        this.style.borderColor = 'red';
        alert('计算错误，请重新输入！');
        this.value = '';
    }
});

几个关键注意点 #

• 一定要用parseInt（或者Number()）把字符串转成数字，同时用trim()去掉输入内容的前后空格，避免因空格导致的验证失败
• 要处理用户输入非数字的情况，用isNaN()判断是否为有效数字
• 千万别忘了后端也要做验证！ 前端验证只是提升用户体验，不能完全防止恶意提交，所以在PHP接收表单数据时，要再检查一次value_num是否等于captcha_num_hidden_contact的值，避免被绕过

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