如何用JavaScript或jQuery在Google Invisible Recaptcha V2提交时校验表单字段

问题分析 #

你的现有代码点击提交按钮会直接触发Recaptcha验证，跳过了表单字段的检查。要实现先验证字段再走Recaptcha流程，需要调整按钮的触发逻辑：先执行自定义字段验证，通过后再启动Recaptcha验证。

另外注意：你的<form>标签用了自闭合写法/>，这会导致表单内的元素不属于表单，必须改成<form ...>然后用</form>闭合，否则后续验证和提交都会出问题。

原生JavaScript实现方案 #

修改后的完整代码 #

<script src='https://www.google.com/recaptcha/api.js'></script>  

<script>
// 表单验证函数
function validateForm() {
    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const radioChecked = document.querySelector('input[name="AttA"]:checked');

    // 检查姓名是否为空
    if (!name) {
        alert('请填写姓名');
        return false;
    }

    // 检查邮箱格式
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('请填写有效的邮箱地址');
        return false;
    }

    // 检查单选框是否选中
    if (!radioChecked) {
        alert('请选择一个选项');
        return false;
    }

    return true;
}

// Recaptcha回调函数
function onSubmit(token) {
    document.getElementById("Form1").submit();
}

// 绑定按钮点击事件
document.addEventListener('DOMContentLoaded', function() {
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.addEventListener('click', function() {
        if (validateForm()) {
            // 验证通过，触发Recaptcha
            grecaptcha.execute();
        }
    });
});
</script>

<form method="POST" action="Editform" name="Form1" id="Form1">
    <input name="Name" id="name" placeholder="姓名">
    <input name="Email" id="email" type="email" placeholder="邮箱">
    
    <input type="radio" value="S1" class="css-radio" id="radio1" name="AttA" />
    <label for="radio1">选项1</label>
    <input type="radio" value="S2" class="css-radio" id="radio2" name="AttA" />
    <label for="radio2">选项2</label>
    <input type="radio" value="S3" class="css-radio" id="radio3" name="AttA" />
    <label for="radio3">选项3</label>

    <!-- 保留Recaptcha属性，移除自动触发类，添加自定义ID -->
    <button class="buttbox" id="submitBtn" data-sitekey="-------" data-callback="onSubmit" style="width:220px;">Submit</button>
</form>

关键改动说明 #

• 给提交按钮添加自定义id="submitBtn"，移除g-recaptcha类，避免自动触发Recaptcha
• 新增validateForm()函数，逐一检查：
  • 姓名输入框是否非空
  • 邮箱是否符合基本格式
  • 单选框组是否有选中项
• 页面加载完成后绑定按钮点击事件，先执行字段验证，通过后再调用grecaptcha.execute()启动Recaptcha
• 修复表单标签的自闭合问题，确保表单元素归属正确

jQuery实现方案 #

如果习惯用jQuery，逻辑和原生JS一致，只是选择器和事件绑定更简洁：

修改后的完整代码 #

<script src='https://www.google.com/recaptcha/api.js'></script>  
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
// 表单验证函数
function validateForm() {
    const name = $('#name').val().trim();
    const email = $('#email').val().trim();
    const radioChecked = $('input[name="AttA"]:checked').length > 0;

    if (!name) {
        alert('请填写姓名');
        return false;
    }

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('请填写有效的邮箱地址');
        return false;
    }

    if (!radioChecked) {
        alert('请选择一个选项');
        return false;
    }

    return true;
}

function onSubmit(token) {
    $("#Form1").submit();
}

$(document).ready(function() {
    $('#submitBtn').click(function() {
        if (validateForm()) {
            grecaptcha.execute();
        }
    });
});
</script>

<form method="POST" action="Editform" name="Form1" id="Form1">
    <input name="Name" id="name" placeholder="姓名">
    <input name="Email" id="email" type="email" placeholder="邮箱">
    
    <input type="radio" value="S1" class="css-radio" id="radio1" name="AttA" />
    <label for="radio1">选项1</label>
    <input type="radio" value="S2" class="css-radio" id="radio2" name="AttA" />
    <label for="radio2">选项2</label>
    <input type="radio" value="S3" class="css-radio" id="radio3" name="AttA" />
    <label for="radio3">选项3</label>

    <button class="buttbox" id="submitBtn" data-sitekey="-------" data-callback="onSubmit" style="width:220px;">Submit</button>
</form>

额外优化建议 #

• 可以把alert换成内联错误提示（比如在对应字段下方显示错误文字），提升用户体验
• 邮箱验证正则可以根据实际需求调整，适配更多场景
• 记得替换data-sitekey里的-------为你的真实Recaptcha站点密钥

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