如何通过JS函数控制HTML表单提交按钮，仅全部验证通过才可提交

1. 调整HTML代码 #

原有代码缺少表单<form>容器，且下拉选的部分选项没有配置value属性，会导致取值异常，修改后代码如下：

<form id="applyForm">
  <input id="Degree" name="Degree" type="number" size="10">
  <select id="year" name="date">
    <option value="2000"> 2000 </option>
    <option value="2001"> 2001 </option>
    <option value="2002"> 2002 </option>
    <option value="2003" selected> 2003 </option>
    <option value="2004"> 2004 </option>
    <option value="2005"> 2005 </option>
  </select>
  <button type="submit">提交表单</button>
</form>

2. 重写JavaScript逻辑 #

核心逻辑是新增变量存储各字段的校验状态，所有校验通过才允许表单提交，代码如下：

// 校验状态存储
let isYearValid = true;
let isDegreeValid = true;
let delayTimer;

const yearSelect = document.getElementById('year');
const degreeInput = document.getElementById('Degree');
const form = document.getElementById('applyForm');

// 年份校验
yearSelect.addEventListener('change', function() {
  const year = Number(this.value);
  if (year < 2003) {
    alert("You are too old");
    isYearValid = false;
  } else {
    isYearValid = true;
  }
})

// 学位值防抖校验
degreeInput.addEventListener('input', (e) => {
  clearTimeout(delayTimer);
  delayTimer = setTimeout(() => {
    const degree = Number(e.target.value);
    if (degree < 73) {
      alert("your degree is less than required");
      isDegreeValid = false;
    } else {
      isDegreeValid = true;
    }
  }, 1050);
});

// 表单提交拦截
form.addEventListener('submit', function(e) {
  // 提交前主动触发一次全量校验，避免用户未修改字段直接提交的场景
  const currentYear = Number(yearSelect.value);
  isYearValid = currentYear >= 2003;
  const currentDegree = Number(degreeInput.value);
  isDegreeValid = currentDegree >=73;

  // 校验不通过阻止提交
  if (!isYearValid) {
    alert("年份不能小于2003");
    e.preventDefault();
    return;
  }
  if (!isDegreeValid) {
    alert("学位值不能小于73");
    e.preventDefault();
    return;
  }
  // 所有校验通过，表单正常提交
})

可选优化 #

如果不需要弹窗提示，可自行替换为页面内嵌入的错误提示文案，用户体验更好。

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