jQuery 表单验证：扩展到非文本输入框-html教程-PHP中文网

jQuery 表单验证：扩展到非文本输入框

DDD

发布： 2025-09-13 18:54:17

原创

916人浏览过

jquery 表单验证：扩展到非文本输入框

本文旨在提供一个清晰的指南，帮助开发者扩展现有的 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">&#xE03B;</i></a>
                <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</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）下的所有文本输入框。为了包含日期选择器和其他类型的输入框，我们需要扩展这个选择器。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

修改后的代码如下：

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');

登录后复制

对于 select 元素，.val() 方法返回的是选中的选项的值。如果希望检查用户是否选择了某个选项，可以检查返回值是否为空字符串或 null。

总结

通过修改 jQuery 选择器，我们可以轻松地扩展现有的表单验证逻辑，使其能够处理各种类型的输入控件。这可以帮助我们提高用户体验和数据质量，并减少服务器端验证的负担。在实际开发中，请根据具体需求选择合适的选择器，并确保在 CSS 中定义了相应的样式，以便清晰地突出显示需要用户注意的字段。

以上就是jQuery 表单验证：扩展到非文本输入框的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

CSS悬停效果控制：利用JavaScript实现父元素及兄弟元素的联动交互 Mac RemNote用CSS高亮HTML结构层次笔记 Mac终端sed批量换CSS名，HTML瞬间焕然一新！ PowerToys批量重命名，HTML+CSS文件秒对齐！内部CSS怎么链接到HTML_内部CSS链接到HTML的详细步骤