本文旨在提供一个清晰的指南，帮助开发者扩展现有的 jquery 表单验证逻辑，使其不仅适用于文本输入框（<input type=”text”>），还能涵盖其他类型的输入控件，如日期选择器（<input type=”date”>）和下拉菜单（<select>）。通过修改 jQuery 选择器，可以轻松地将验证规则应用于各种表单元素，从而提高用户体验和数据质量。
扩展 jQuery 验证到非文本输入框
在前端开发中，表单验证是确保用户输入数据质量的关键步骤。通常，我们使用 jQuery 来简化 dom 操作和事件处理，从而实现客户端验证。一个常见的需求是，当用户尝试提交一个空的必填字段时，我们希望以某种方式（例如，改变边框颜色）来突出显示该字段。
以下是一个使用 bootstrap 表格，并具有添加和删除行功能的示例代码片段，我们将在此基础上进行改进：
<table class="table table-bordered"> <thead> <tr> <th>Name</th> <th>Department</th> <th>Phone</th> <th>Date</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>Administration</td> <td>(171) 555-2222</td> <td>2023-10-26</td> <td> <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a> <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a> <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a> </td> </tr> </tbody> </table>
默认情况下，提供的 jQuery 代码只针对 input[type=”text”] 类型的输入框进行验证。这意味着，如果我们在表格中添加了 <input type=”date”> 或 <select> 元素，验证逻辑将不会应用于它们。
为了解决这个问题，我们需要修改 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; }
- 根据实际需求，可能需要添加其他类型的输入控件到选择器中。例如，如果表单中包含 <textarea> 元素，则需要将 textarea 添加到选择器中：
var input = $(this).parents("tr").find('input[type="text"], input[type="date"], select, textarea');
总结
通过修改 jQuery 选择器，我们可以轻松地扩展现有的表单验证逻辑，使其能够处理各种类型的输入控件。这可以帮助我们提高用户体验和数据质量，并减少服务器端验证的负担。在实际开发中，请根据具体需求选择合适的选择器，并确保在 CSS 中定义了相应的样式，以便清晰地突出显示需要用户注意的字段。
评论（已关闭）
评论已关闭