如何用纯JavaScript在表单程序化提交前自动校验所有required必填项

云上老周

2026-9-26

原生JavaScript实现表单必填项自动校验方案

完全可以通过原生JavaScript实现需求，HTML5表单API已经内置了对应的校验能力，无需手动逐个判断输入项，也不需要引入第三方依赖。

核心实现原理

原生HTMLFormElement提供了内置的checkValidity()方法，调用时会自动遍历表单内所有输入元素，校验包括required必填规则、type格式规则（如邮箱、数字）、pattern自定义正则、min/max长度/数值限制等所有HTML5表单校验规则，全部校验通过返回true，否则返回false，同时会触发浏览器默认的校验提示气泡。

适配现有代码的修改方案

直接替换你的checkForm函数逻辑即可：

function checkForm(e) {
   e.preventDefault();
   // 其他业务逻辑
   const myForm = document.getElementById('myForm');
   // 自动校验所有必填项及其他原生校验规则
   if(myForm.checkValidity()) {
     myForm.submit();
   }
}

实现你期望的`valid()`调用方式

如果要完全匹配你想要的form.valid()调用风格，可以给表单原型扩展对应方法：

// 全局扩展表单的valid方法，一次定义所有表单都可以使用
HTMLFormElement.prototype.valid = function() {
  return this.checkValidity();
}

// 后续就可以直接用你想要的写法调用
function checkForm(e) {
   e.preventDefault();
   // 其他业务逻辑
   if(document.getElementById('myForm').valid()) {
     document.getElementById('myForm').submit();
   }
}