前端表单联动：Phone非空时Name必填，反之亦然的实现方法

你可以通过监听输入框的输入事件，动态切换required属性来实现这个需求，以下是具体实现方案：

1. 为输入框添加ID（便于JS获取元素） #

先给两个输入框加上唯一ID，方便后续操作：

<input type="text" placeholder="Enter name" class="form-control" asp-for="Name" value="@Model.Name" id="nameInput" />
<input type="text" placeholder="Enter phone" class="form-control" asp-for="Phone" value="@Model.Phone" id="phoneInput" />

2. 编写原生JavaScript逻辑 #

通过监听输入事件，实时更新两个输入框的必填状态，同时处理页面加载时的初始值情况：

const nameInput = document.getElementById('nameInput');
const phoneInput = document.getElementById('phoneInput');

// 核心逻辑：根据对方输入框的内容更新当前输入框的必填状态
function updateRequiredStatus() {
    nameInput.required = phoneInput.value.trim() !== '';
    phoneInput.required = nameInput.value.trim() !== '';
}

// 页面加载完成后先执行一次，处理初始值
document.addEventListener('DOMContentLoaded', updateRequiredStatus);

// 监听两个输入框的输入事件，实时更新状态
nameInput.addEventListener('input', updateRequiredStatus);
phoneInput.addEventListener('input', updateRequiredStatus);

3. 可选：表单提交时的兜底验证 #

如果需要更严谨的验证（防止用户通过控制台修改DOM属性绕过验证），可以在表单提交时再做一次检查：

document.querySelector('form').addEventListener('submit', function(e) {
    const hasName = nameInput.value.trim() !== '';
    const hasPhone = phoneInput.value.trim() !== '';

    // 一个填写了另一个没填，阻止提交并提示
    if ((hasName && !hasPhone) || (!hasName && hasPhone)) {
        e.preventDefault();
        alert('请同时填写姓名和电话，或都不填写');
    }
});

补充说明 #

• 原生HTML5的required属性会在表单提交时自动触发浏览器默认的必填提示，如果需要自定义提示文案，可以使用setCustomValidity方法
• 如果你的项目使用jQuery，逻辑类似，只需要把元素选择和事件绑定换成jQuery写法即可

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