本文介绍一种纯前端动态校验方案：当两个输入框中任意一个有内容时，另一个也自动变为必填项，通过监听输入事件实时控制 required 属性。

本文介绍一种纯前端动态校验方案：当两个输入框中任意一个有内容时，另一个也自动变为必填项，通过监听输入事件实时控制 required 属性。

在表单交互中，常遇到“联动必填”需求：例如姓名与手机号两个字段，业务逻辑要求——只要其中任一字段被填写，另一个就必须补全（即“有则俱全”）。这种约束无法通过静态 HTML required 属性实现，需借助 JavaScript 动态管理。

以下是一个简洁、可扩展的实现方案：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

✅ 核心逻辑说明

• 监听表单内所有目标文本输入框的 input 事件；
• 每次输入后，检查是否存在至少一个非空值；
• 若存在，则为所有目标输入框统一设置 required = true；否则设为 false；
• 此设计天然支持双向依赖（Name ↔ Phone），无需分别判断条件分支。

? 完整示例代码

Submit

<script> // 获取表单内所有文本输入框（可按需调整选择器，如加类名 .linked-required） const inputs = [...document.frm1.querySelectorAll('input[type="text"]')]; document.frm1.addEventListener('input', (e) => { // 判断是否有任意输入框非空（trim() 防止仅空格被误判） const hasContent = inputs.some(input => input.value.trim() !== ''); // 同步设置所有目标输入框的 required 状态 inputs.forEach(input => { input.required = hasContent; // 可选：视觉提示（如添加/移除红色边框或星号） input.style.borderColor = hasContent && !input.value.trim() ? '#dc3545' : ''; }); }); </script>

⚠️ 注意事项

• 兼容性：input 事件在现代浏览器中广泛支持（包括 IE9+），但若需兼容极旧环境，可补充 change 或 blur 作为兜底。
• 性能：该逻辑轻量，适用于数十个字段以内；若字段极多，可考虑防抖（debounce），但本场景通常无需。
• 服务端校验不可省略：前端校验仅为用户体验优化，必须配合后端验证，防止绕过。
• 可扩展性：如需限定特定字段（而非全部 type="text"），建议为它们统一添加自定义类名（如 class="linked-required"），并将选择器改为 '.linked-required'。

通过此方案，你无需修改后端模型或引入复杂框架，即可在纯前端实现清晰、健壮的双向必填逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！