如何使用JavaScript提交表单同时保留HTML原生校验与浏览器默认错误提示

你完全不需要手动遍历字段校验或者重写校验规则，浏览器原生API已经可以满足所有需求：

• 表单元素自带的reportValidity()方法会自动执行所有你在HTML中定义的minlength/maxlength/pattern等校验规则，校验不通过时会直接展示浏览器原生样式的字段错误提示，校验全量通过才会返回布尔值true
• 你可以在校验通过后再执行reCAPTCHA的分数生成逻辑，完全符合你希望先校验、避免无效请求和reCAPTCHA调用的需求

实现代码示例 #

// 选择你的表单元素
const targetForm = document.getElementById('你的表单ID');

// 绑定到你的提交触发逻辑（比如提交按钮的click事件）
function customFormSubmit() {
  // 第一步：执行原生校验+展示原生错误提示
  if (!targetForm.reportValidity()) {
    // 校验不通过直接终止后续逻辑
    return;
  }

  // 第二步：校验通过后再调用reCAPTCHA生成分数
  grecaptcha.ready(() => {
    grecaptcha.execute('你的reCAPTCHA站点密钥', { action: 'submit' })
      .then((recaptchaToken) => {
        // 插入token到表单
        const tokenInput = document.createElement('input');
        tokenInput.type = 'hidden';
        tokenInput.name = 'g-recaptcha-response';
        tokenInput.value = recaptchaToken;
        targetForm.appendChild(tokenInput);

        // 提交表单
        targetForm.submit();
      });
  });
}

补充说明 #

• 如果需要在校验不通过时执行自定义逻辑，可以搭配checkValidity()方法使用，该方法仅返回校验结果、不会弹出原生错误提示
• reportValidity()兼容性覆盖所有主流现代浏览器：Chrome 40+、Firefox 49+、Edge 12+、Safari 10.1+，无需额外兼容处理
• 前端原生校验仅作为用户体验优化手段，你已经实现的服务端校验是最终的安全防线，二者不存在冲突

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