如何创建两个可提交HTML表单 实现按提交范围校验字段

问题根源：原生HTML表单默认会校验当前<form>标签内部所有可交互、未禁用的带校验约束（required/pattern/minlength等）的字段，之前的实现未将非当前表单需要校验的字段排除在校验范围外，才会出现点formA提交按钮连带校验field2的问题。

以下两种方案都可以完全满足需求，可根据自己的代码习惯选择：

方案1：结构分离+原生校验API（逻辑最清晰） #

不嵌套form标签，公共展示字段放在表单外部，提交前手动同步值、触发对应范围的校验，完全保留原生校验的提示行为，不需要自定义校验规则。

<!-- 按展示顺序排列公共输入项，不属于任何表单的子元素 -->
<input type="text" id="field1" required placeholder="字段1" pattern="^[a-zA-Z0-9]+$">
<form id="formA" action="/submit-a" method="POST">
  <input type="hidden" name="field1" id="formA_field1">
  <button type="submit" id="formA_btn">提交表单A（仅校验字段1）</button>
</form>

<input type="text" id="field2" required placeholder="字段2" minlength="3">
<form id="formB" action="/submit-b" method="POST">
  <input type="hidden" name="field1" id="formB_field1">
  <input type="hidden" name="field2" id="formB_field2">
  <button type="submit" id="formB_btn">提交表单B（校验两个字段）</button>
</form>

配套JS逻辑：

const [field1, field2] = [document.getElementById('field1'), document.getElementById('field2')]
const [formA, formB] = [document.getElementById('formA'), document.getElementById('formB')]

formA.addEventListener('submit', e => {
  // 仅校验field1，不触碰field2
  if (!field1.reportValidity()) {
    e.preventDefault()
    return
  }
  // 同步值到表单内部隐藏字段后正常提交
  document.getElementById('formA_field1').value = field1.value
})

formB.addEventListener('submit', e => {
  // 同时校验两个字段
  if (!field1.reportValidity() || !field2.reportValidity()) {
    e.preventDefault()
    return
  }
  // 同步两个字段的值
  document.getElementById('formB_field1').value = field1.value
  document.getElementById('formB_field2').value = field2.value
})

方案2：单表单+临时禁用字段（代码量最少） #

把所有字段放在同一个表单内，点击formA提交按钮时临时把field2设为禁用状态——原生表单会自动跳过禁用字段的校验和提交，不需要额外写过滤逻辑。

<form id="mainForm" action="/submit" method="POST">
  <input type="text" name="field1" id="field1" required placeholder="字段1" pattern="^[a-zA-Z0-9]+$">
  <button type="button" id="formA_btn">提交表单A（仅校验字段1）</button>

  <input type="text" name="field2" id="field2" required placeholder="字段2" minlength="3">
  <button type="submit" id="formB_btn">提交表单B（校验两个字段）</button>
</form>

配套JS逻辑：

const mainForm = document.getElementById('mainForm')
const [field1, field2] = [document.getElementById('field1'), document.getElementById('field2')]
const formA_btn = document.getElementById('formA_btn')

formA_btn.addEventListener('click', () => {
  // 临时禁用field2，跳过其校验和提交
  field2.disabled = true
  if (field1.reportValidity()) {
    // 加隐藏标记区分提交来源，方便后端处理
    const mark = Object.assign(document.createElement('input'), {
      type: 'hidden',
      name: 'submit_type',
      value: 'formA'
    })
    mainForm.appendChild(mark)
    mainForm.submit()
  }
  // 校验完成后恢复field2状态
  field2.disabled = false
})
// formB直接用原生submit逻辑，自动校验两个字段

注意：两种方案都不需要修改原生校验规则，浏览器自带的错误提示、校验逻辑都会正常生效，不会出现跨范围误校验的问题。

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