如何仅在表单提交时触发浏览器自带的默认表单验证功能？

前置准备（HTML表单配置） #

先给表单元素配置原生验证属性，直接依赖浏览器自带的校验逻辑，无需额外编写验证规则：

• 基础类型校验：对应表单项设置正确的type属性，如type="email"自动校验邮箱格式、type="number"做数值类校验
• 必填校验：必填项添加required属性
• 数值步长校验：type="number"的项搭配step属性，比如step="0.5"限制数值只能是0.5的倍数
• 手机号校验：type="tel"搭配pattern="1[3-9]\d{9}"正则校验国内手机号格式，可额外加title属性自定义错误提示文案

核心JS逻辑 #

监听表单的submit事件，优先触发原生校验，校验通过后再执行自定义提交逻辑：

const form = document.querySelector('#yourFormId');
form.addEventListener('submit', function(e) {
  // 触发浏览器原生全表单校验，返回布尔值表示是否通过
  const isValidatePass = form.checkValidity();
  if (!isValidatePass) {
    // 校验不通过时浏览器会自动弹出默认错误提示，无需额外处理
    return;
  }
  // 校验通过，阻止默认表单提交行为
  e.preventDefault();
  
  // 把FormData转为JSON格式
  const formData = new FormData(form);
  const jsonData = {};
  formData.forEach((value, key) => {
    jsonData[key] = value;
  });
  
  // 发起AJAX POST请求，这里以fetch为例
  fetch('/your-submit-api', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(jsonData)
  }).then(res => res.json())
  .then(data => {
    // 处理提交成功逻辑
    console.log('提交成功', data);
  }).catch(err => {
    // 处理提交失败逻辑
    console.error('提交失败', err);
  });
});

可选优化 #

如果需要自定义校验失败的提示文案，可以调用表单项的setCustomValidity()方法覆盖默认提示：

document.querySelector('#phoneInput').addEventListener('invalid', function() {
  if (this.validity.patternMismatch) {
    this.setCustomValidity('请输入正确的11位国内手机号');
  } else {
    this.setCustomValidity('');
  }
});

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