如何实现“任一输入框非空时另一输入框也必须填写”的前端校验
本文介绍一种纯前端动态校验方案：当两个输入框中任意一个有内容时，另一个也自动变为必填项，通过监听输入事件实时控制 required 属性。
在表单开发中，你是否遇到过这样的业务逻辑？比如，一个联系信息表单里有“姓名”和“手机号”两个字段。规则很明确：要么两个都空着，要么两个都必须填上。这种“有则俱全”的联动校验，用静态的HTML required属性是搞不定的，必须让Ja vaScript动态介入。
下面分享一个既简洁又易于扩展的实现思路。
✅ 核心逻辑说明
整个方案的核心可以概括为三步：
- 监听事件：为目标输入框绑定
input事件监听器。 - 检查状态：每当有输入发生时，立刻检查这一组输入框中，是否存在至少一个非空值。
- 动态切换：如果存在非空值，那么所有目标输入框的
required属性都设为true；反之，则全部设为false。
这个设计的巧妙之处在于它的双向性。无论是先填姓名还是先填手机号，逻辑都能自动覆盖，无需为每个字段单独写条件判断。
? 完整示例代码
⚠️ 注意事项
方案虽简洁，但有几个关键点需要留意：
- 兼容性：
input事件在现代浏览器中支持良好（包括IE9+）。如果项目需要兼容更古老的环境，可以考虑用change或blur事件作为补充。 - 性能：这套逻辑非常轻量，处理几十个字段毫无压力。除非表单极其庞大，否则一般不需要引入防抖（debounce）优化。
- 服务端校验不可省略：这一点必须强调。前端校验的核心是提升用户体验，绝不能替代后端验证。任何前端规则都可以被绕过，后端的数据校验才是安全的最后防线。
- 可扩展性：示例代码选择了所有
type="text"的输入框。在实际项目中，如果只想让特定字段组联动，建议为它们添加一个共同的类名（例如linked-required），然后将选择器改为'.linked-required'，这样控制起来更精准。
总的来说，这个方案的优势在于清晰和健壮。它不依赖复杂的框架，也不需要改动后端模型，仅用少量前端代码就能实现优雅的“双向必填”交互逻辑，值得在合适的场景中一试。
