表单字段组合校验需监听关键字段变化并实时计算依赖逻辑，如支付方式切换时动态校验对应字段；应使用change/input事件配合防抖，调用setcustomvalidity与reportvalidity实现原生校验反馈。
表单字段组合校验的本质是跨字段依赖判断
不是每个字段单独 valid 就算通过，而是多个字段值合起来要满足业务逻辑约束。比如「支付方式选「银行卡」时，「银行卡号」和「开户行」必填；选「支付宝」则「支付宝账号」必填」——这种规则无法靠 required 或 pattern 单独实现，必须用 JS 主动监听+计算。
用 addEventListener 监听关键字段变化再触发校验
别在 submit 时才校验，用户输入过程中就该反馈。重点监听 change 和 input：前者适合下拉、单选；后者适合文本框实时响应（但注意防抖）。
-
change事件对<select></select>、<input type="radio">更可靠，避免过早触发 -
input事件对<input type="text">有效，但连续打字会高频触发，建议加setTimeout防抖（延迟 300ms） - 所有监听都应绑定到具体字段元素，而非整个 form —— 明确知道谁变了，才能精准重算依赖项
校验逻辑写在独立函数里，避免硬编码 DOM 查询
把规则抽成函数，比如 validatePaymentFields()，它只做三件事：取值 → 判断组合条件 → 设置错误状态。DOM 查询用 document.getElementById() 或 form.querySelector()，别用 getElementsByClassName 这种返回类数组的接口，容易漏判。
示例片段：
function validatePaymentFields() {
const method = document.getElementById('payment-method').value;
const bankNumber = document.getElementById('bank-number').value.trim();
const alipayAccount = document.getElementById('alipay-account').value.trim();
// 清除之前错误
['bank-number', 'alipay-account'].forEach(id => {
document.getElementById(id).setCustomValidity('');
});
if (method === 'bank' && !bankNumber) {
document.getElementById('bank-number').setCustomValidity('请填写银行卡号');
}
if (method === 'alipay' && !alipayAccount) {
document.getElementById('alipay-account').setCustomValidity('请填写支付宝账号');
}
}
setCustomValidity 是最轻量的原生集成方案
不用自己写红框、弹提示，直接调用 setCustomValidity()，配合 reportValidity() 就能触发浏览器默认校验 UI。注意两点：
- 传空字符串
''表示“通过”，传非空字符串表示“不通过”并显示该文字 - 必须在
submit事件里手动调用form.reportValidity()，否则组合规则不会阻断提交（原生required会自动触发，但自定义规则不会） - 如果用了第三方 UI 库（如 Element Plus），它的表单组件通常有
validateField方法替代setCustomValidity，原理一致但 API 不同
复杂点在于：当一个字段被多个规则依赖时，setCustomValidity 被多次调用，后一次会覆盖前一次。所以务必在每次校验开始前先清空所有相关字段的自定义错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
