Laravel中使用AJAX提交带Recaptcha表单遇必填报错如何解决？

算力阿峰

2026-9-28

问题修复方案

核心错误原因

提交的验证码字段名和后端验证的字段名不匹配：后端校验的字段是g-recaptcha-response，原代码中AJAX追加的字段名是recaptcha，完全无法匹配
FormData调用错误：原代码在beforeSend中直接调用FormData.append()，操作的是FormData构造函数而非之前实例化的对象，验证码值根本没有被传入请求

修复代码（AJAX部分）

替换原有AJAX逻辑即可：

$(function(){
    $("#registerForm").on('submit', function(e){       
        e.preventDefault(); 
        // 先获取验证码token，提前校验是否完成验证
        var recaptchaToken = grecaptcha.getResponse();
        if(!recaptchaToken){
            alert('请先完成人机验证');
            return;
        }
        // 实例化FormData并提前追加正确的验证码字段
        let formData = new FormData(this);
        formData.append('g-recaptcha-response', recaptchaToken);
        
        $.ajax({
            url:$(this).attr('action'),
            method:$(this).attr('method'),
            data: formData,
            processData:false,
            dataType:'json',
            contentType:false,
            beforeSend:function(){
                $(document).find('span.error-text').text('');
            },
            success:function(data){
                if(data.status == 0){                            
                    $.each(data.error, function(prefix, val){
                        $('span.'+prefix+'_error').text(val[0]);
                    });
                    // 验证失败后重置验证码，允许重新验证
                    grecaptcha.reset();
                }else{
                    $('#registerForm')[0].reset();
                    grecaptcha.reset();
                    alert(data.msg);
                }
            }
        });
    });
});