本文详细介绍了如何使用javascript实现表单验证，以确保成对的输入框要么同时填写，要么同时留空，从而防止用户只填写其中一个输入框就提交表单。教程涵盖了单组输入框和多组输入框的验证逻辑，通过动态禁用提交按钮来提升用户体验，并提供了清晰的代码示例和注意事项。
引言
在网页表单设计中，我们经常会遇到需要用户成对填写信息的场景，例如起始日期和结束日期、最小值和最大值等。在这种情况下，通常的业务逻辑是允许用户将这对输入框都留空，或者都填写完整，但绝不允许只填写其中一个而另一个留空。为了提升用户体验并确保数据完整性，我们可以通过前端JavaScript验证来实现这一需求，在不满足条件时禁用表单提交按钮。
单组输入框的验证实现
首先，我们来看如何处理只有一组配对输入框的情况。
HTML 结构
假设我们有一对名为 cas 和 exams 的输入框，以及一个提交按钮：
<input name="cas[]" id="ca" type="text" placeholder="输入CA值"> <input name="exams[]" id="exam" type="text" placeholder="输入Exam值"> <button type="submit" id="submit">提交</button>
JavaScript 验证逻辑
为了实现当一个输入框有值而另一个为空时禁用提交按钮，我们可以监听这两个输入框的 keyup 事件。
立即学习“前端免费学习笔记（深入）”；
// 获取DOM元素
var caInput = document.getElementById("ca");
var examInput = document.getElementById("exam");
var submitButton = document.getElementById("submit");
// 为输入框绑定keyup事件监听器
caInput.onkeyup = validateInputs;
examInput.onkeyup = validateInputs;
/**
* 验证函数：检查成对输入框的填写状态
* 如果一个有值而另一个为空，则禁用提交按钮
*/
function validateInputs() {
const caValue = caInput.value.trim(); // 获取并去除前后空格
const examValue = examInput.value.trim();
// 判断条件：
// 1. ca有值且exam为空
// 2. ca为空且exam有值
if ((caValue !== "" && examValue === "") || (caValue === "" && examValue !== "")) {
submitButton.disabled = true; // 禁用提交按钮
} else {
submitButton.disabled = false; // 启用提交按钮
}
}
// 页面加载时执行一次验证，以处理初始状态
validateInputs();逻辑说明：
- 我们通过 document.getElementById 获取到两个输入框和提交按钮的引用。
- 为每个输入框的 onkeyup 事件绑定 validateInputs 函数。这意味着每当用户在输入框中敲击键盘并释放时，都会触发验证。
- 在 validateInputs 函数中，我们获取两个输入框的当前值，并使用 trim() 方法去除可能存在的首尾空格，确保准确判断是否为空。
- 核心逻辑是判断 (caValue !== "" && examValue === "") || (caValue === "" && examValue !== "")。如果满足这个条件（即一个有值另一个为空），则将提交按钮的 disabled 属性设置为 true，禁用按钮；否则，将 disabled 属性设置为 false，启用按钮。
- 在脚本加载完成后立即调用 validateInputs() 一次，以确保页面初始状态（例如，如果输入框预填充了值）下的提交按钮状态是正确的。
多组输入框的验证实现
当页面中存在多组这样的配对输入框时，我们可以采用更通用的方法，通过类名来选择元素并进行迭代验证。
HTML 结构
为了方便选择，我们为每对输入框赋予相同的类名，例如 ca 和 exam：
<input value="" name="cas[]" class="ca" type="text" placeholder="CA值"> <input value="" name="exams[]" class="exam" type="text" placeholder="Exam值"> <br><br> <input value="" name="cas[]" class="ca" type="text" placeholder="CA值"> <input value="" name="exams[]" class="exam" type="text" placeholder="Exam值"> <br><br> <!-- 更多成对输入框... --> <button type="submit" id="submit">提交</button>
JavaScript 验证逻辑
对于多组输入框，我们可以监听 window 对象的 oninput 事件，并在事件触发时遍历所有配对输入框进行验证。
// 获取所有具有指定类名的输入框集合
var caInputs = document.getElementsByClassName("ca");
var examInputs = document.getElementsByClassName("exam");
var submitButton = document.getElementById("submit");
var numOfPairs = caInputs.length; // 假设caInputs和examInputs长度相同
// 监听整个窗口的input事件，以便捕获所有输入框的变化
window.oninput = function() {
// 调用验证函数，并根据其结果更新提交按钮状态
if (checkAllPairsValidity()) {
submitButton.disabled = true; // 存在无效对，禁用按钮
} else {
submitButton.disabled = false; // 所有对都有效，启用按钮
}
};
/**
* 检查所有成对输入框的有效性
* @returns {boolean} 如果存在任何一个无效的输入对，返回 true；否则返回 false。
*/
function checkAllPairsValidity() {
for (let i = 0; i < numOfPairs; i++) {
const caValue = caInputs[i].value.trim();
const examValue = examInputs[i].value.trim();
// 如果发现任何一对输入框是“一个有值另一个为空”的状态，则立即返回 true
if ((caValue !== "" && examValue === "") || (caValue === "" && examValue !== "")) {
return true; // 存在无效对
}
}
return false; // 所有对都有效
}
// 页面加载时执行一次验证
window.onload = function() {
if (checkAllPairsValidity()) {
submitButton.disabled = true;
} else {
submitButton.disabled = false;
}
};逻辑说明：
- 我们使用 document.getElementsByClassName 获取所有 class="ca" 和 class="exam" 的输入框，它们返回的是 HTMLCollection 集合。
- numOfPairs 存储了配对的数量。
- 我们监听 window.oninput 事件。oninput 事件比 onkeyup 更通用，它能捕获所有类型的输入变化，包括键盘输入、粘贴、自动填充等。
- checkAllPairsValidity 函数遍历每一对输入框。在循环中，它获取当前对输入框的值，并进行相同的逻辑判断。
- 如果 checkAllPairsValidity 函数在遍历过程中发现任何一对输入框不符合“同时填写或同时留空”的规则，它会立即返回 true，表示存在无效对。
- window.oninput 的回调函数根据 checkAllPairsValidity 的返回值来决定提交按钮的禁用状态。如果返回 true（存在无效对），则禁用按钮；否则，启用按钮。
- window.onload 确保页面加载完成后，对所有输入框进行一次初始验证。
注意事项与优化
- 事件选择： onkeyup 适用于简单的键盘输入验证，而 oninput 更加全面，能够响应所有类型的用户输入（包括鼠标粘贴、自动填充、拖放等），因此在多数实时验证场景中更推荐使用 oninput。
- 用户体验： 仅仅禁用提交按钮可能不足以提供良好的用户体验。考虑在不满足条件时，除了禁用按钮外，还在相关输入框下方显示明确的错误提示信息，指导用户如何操作。
- 服务器端验证： 客户端（前端）验证主要是为了提供即时反馈和优化用户体验，但不能替代服务器端验证。为了确保数据安全性和完整性，所有提交到服务器的数据都必须在服务器端再次进行严格的验证。
- 代码健壮性： 在获取 DOM 元素时，可以添加空值检查，以防止在元素不存在时抛出错误。
- 可访问性（Accessibility）： 如果添加了错误提示，确保这些提示对屏幕阅读器用户也是可访问的（例如使用 aria-live 属性）。
- 框架或库： 对于更复杂的表单验证需求，可以考虑使用现有的前端框架（如 React, Vue, Angular）或专门的表单验证库（如 jQuery Validation Plugin, VeeValidate, Formik），它们通常提供了更强大、更灵活的验证机制和更好的错误处理。
总结
通过上述JavaScript方法，我们能够有效地实现对成对输入框的联动验证，确保用户要么将它们都填写完整，要么都留空，从而提升表单数据的质量和用户体验。无论是单组还是多组配对输入框，核心逻辑都是通过监听输入事件，动态检查输入状态并控制提交按钮的可用性。记住，前端验证是用户体验的重要组成部分，但始终需要配合服务器端验证来保障数据的安全性和准确性。
