本文详细介绍了如何使用javascript实现表单验证，以确保成对的输入框要么同时填写，要么同时留空，从而防止用户只填写其中一个输入框就提交表单。教程涵盖了单组输入框和多组输入框的验证逻辑，通过动态禁用提交按钮来提升用户体验，并提供了清晰的代码示例和注意事项。
引言
在网页表单设计中，我们经常会遇到需要用户成对填写信息的场景，例如起始日期和结束日期、最小值和最大值等。在这种情况下，通常的业务逻辑是允许用户将这对输入框都留空，或者都填写完整，但绝不允许只填写其中一个而另一个留空。为了提升用户体验并确保数据完整性，我们可以通过前端JavaScript验证来实现这一需求，在不满足条件时禁用表单提交按钮。
单组输入框的验证实现
首先，我们来看如何处理只有一组配对输入框的情况。
HTML 结构
假设我们有一对名为 cas 和 exams 的输入框，以及一个提交按钮：
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：
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方法，我们能够有效地实现对成对输入框的联动验证，确保用户要么将它们都填写完整，要么都留空，从而提升表单数据的质量和用户体验。无论是单组还是多组配对输入框，核心逻辑都是通过监听输入事件，动态检查输入状态并控制提交按钮的可用性。记住，前端验证是用户体验的重要组成部分，但始终需要配合服务器端验证来保障数据的安全性和准确性。
以上就是前端表单验证：确保成对输入框同步填写或留空的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598344.html
微信扫一扫 
支付宝扫一扫 
