本文旨在提供一个清晰的指南，帮助开发者扩展现有的 jQuery 表单验证逻辑，使其不仅适用于文本输入框（），还能涵盖其他类型的输入控件，如日期选择器（）和下拉菜单（
扩展 jQuery 验证到非文本输入框
在前端开发中，表单验证是确保用户输入数据质量的关键步骤。通常，我们使用 jQuery 来简化 DOM 操作和事件处理，从而实现客户端验证。一个常见的需求是，当用户尝试提交一个空的必填字段时，我们希望以某种方式（例如，改变边框颜色）来突出显示该字段。
以下是一个使用 Bootstrap 表格，并具有添加和删除行功能的示例代码片段，我们将在此基础上进行改进：
| Name | Department | Phone | Date | Actions |
|---|---|---|---|---|
| John Doe | Administration | (171) 555-2222 | 2023-10-26 | |
默认情况下，提供的 jQuery 代码只针对 input[type="text"] 类型的输入框进行验证。这意味着，如果我们在表格中添加了 或
为了解决这个问题，我们需要修改 jQuery 选择器，使其能够同时选择多种类型的输入控件。
修改 jQuery 选择器
问题的关键在于以下这行代码：
var input = $(this).parents("tr").find('input[type="text"]');这行代码使用 find('input[type="text"]') 来查找当前行（tr）下的所有文本输入框。为了包含日期选择器和其他类型的输入框，我们需要扩展这个选择器。
修改后的代码如下：
var input = $(this).parents("tr").find('input[type="text"], input[type="date"], select');在这个修改后的版本中，我们使用了逗号分隔符来指定多个选择器。这意味着 find() 方法将查找所有类型为 "text" 或 "date" 的 input 元素，以及所有的 select 元素。
完整代码示例
以下是包含修改后的选择器的完整 jQuery 代码片段：
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"], input[type="date"], select');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});在这个代码片段中，我们首先定义一个变量 empty 来跟踪是否存在空的必填字段。然后，我们使用修改后的选择器来查找所有需要验证的输入控件。接下来，我们遍历这些输入控件，检查它们的值是否为空。如果某个输入控件的值为空，我们就向其添加一个 "error" 类，并将 empty 变量设置为 true。
如果 empty 变量为 false，则表示所有必填字段都已填写，我们可以继续提交表单。否则，我们将焦点设置到第一个带有 "error" 类的输入控件，并阻止表单提交。
注意事项
- 确保在 CSS 中定义了 .error 类的样式，以便在用户尝试提交空的必填字段时，可以清晰地突出显示这些字段。例如：
.form-control.error {
border-color: #f50000;
}- 根据实际需求，可能需要添加其他类型的输入控件到选择器中。例如，如果表单中包含
var input = $(this).parents("tr").find('input[type="text"], input[type="date"], select, textarea');- 对于 select 元素，.val() 方法返回的是选中的选项的值。如果希望检查用户是否选择了某个选项，可以检查返回值是否为空字符串或 null。
总结
通过修改 jQuery 选择器，我们可以轻松地扩展现有的表单验证逻辑，使其能够处理各种类型的输入控件。这可以帮助我们提高用户体验和数据质量，并减少服务器端验证的负担。在实际开发中，请根据具体需求选择合适的选择器，并确保在 CSS 中定义了相应的样式，以便清晰地突出显示需要用户注意的字段。
