通过jQuery提交表单时HTML pattern验证未触发，如何实现验证？

当然可以让场景2的表单提交触发pattern验证，原生JS提供了专门的API来手动触发HTML表单验证，下面给你两种实用方案：

方案1：手动调用表单验证API #

利用checkValidity()判断表单是否符合验证规则，再用reportValidity()弹出和原生提交一致的错误提示，修改你的verifyCaptcha函数即可：

function verifyCaptcha(){
    const form = document.getElementById('loginFormBean');
    // 先触发表单验证
    if (!form.checkValidity()) {
        // 显示原生样式的错误提示
        form.reportValidity();
        return false;
    }

    console.log('verifying captcha');
    if (typeof grecaptcha !== 'undefined') {
        var siteKey = 'xxxx';
        grecaptcha.execute(siteKey, {action: 'forgotPassword'}).then(function(response) {
            console.log(response);
            $('#response').val(response);
            $('#loginFormBean').submit();
        });
    }
    return false;
}

方案2：模拟点击隐藏的submit按钮 #

在表单里添加一个隐藏的type="submit"按钮，验证码验证通过后触发该按钮的点击事件，完全复用原生提交的验证逻辑：

1. 先在表单内加入隐藏按钮：

<button type="submit" id="hiddenSubmitBtn" style="display: none;"></button>

2. 修改verifyCaptcha函数：

function verifyCaptcha(){
    console.log('verifying captcha');
    if (typeof grecaptcha !== 'undefined') {
        var siteKey = 'xxxx';
        grecaptcha.execute(siteKey, {action: 'forgotPassword'}).then(function(response) {
            console.log(response);
            $('#response').val(response);
            // 点击隐藏的submit按钮，自动触发原生验证
            document.getElementById('hiddenSubmitBtn').click();
        });
    }
    return false;
}

两种方案的区别：

• 方案1可以灵活控制验证时机，适合需要在验证前后插入额外逻辑的场景；
• 方案2完全复刻原生提交流程，不需要手动处理验证判断，适合追求和场景1完全一致体验的需求。

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