本文介绍了如何使用 jQuery 扩展现有的 Bootstrap 表格验证功能，使其能够正确地验证非文本输入框（如日期选择器和下拉菜单）。通过修改 jQuery 选择器，可以确保所有类型的输入框在提交时都经过验证，并提供相应的视觉反馈。
在 Bootstrap 表格中，经常需要验证用户输入的数据，确保数据的完整性和准确性。默认情况下，一些 jQuery 脚本可能只针对文本输入框进行验证，而忽略了其他类型的输入框，例如日期选择器 () 和下拉菜单 ()。本文将介绍如何修改 jQuery 代码，使其能够同时验证文本和非文本输入框，并在验证失败时提供相应的视觉反馈。
修改 jQuery 选择器
问题的核心在于 jQuery 选择器的范围。原始代码只选择了 input[type=”text”]，这意味着只有文本类型的输入框会被验证。要解决这个问题，需要修改选择器，使其包含所有需要验证的输入框类型。
以下是修改后的代码片段：
// Add row on add button click$(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"); } });
在这个修改后的代码中，.find() 方法现在使用了一个更广泛的选择器：’input[type=”text”], input[type=”date”], select’。这意味着 jQuery 将会选择所有类型为 “text” 或 “date” 的 input 元素，以及所有的 select 元素。
示例代码
以下是一个完整的示例，展示了如何将修改后的 jQuery 代码应用到 Bootstrap 表格中：
Bootstrap Table with Add and Delete Row Feature body { color: #404E67; background: #F5F7FA; font-family: 'Open Sans', sans-serif; } .table-wrapper { width: 700px; margin: 30px auto; background: #fff; padding: 20px; box-shadow: 0 1px 1px rgba(0,0,0,.05); } .table-title { padding-bottom: 10px; margin: 0 0 10px; } .table-title h2 { margin: 6px 0 0; font-size: 22px; } .table-title .add-new { float: right; height: 30px; font-weight: bold; font-size: 12px; text-shadow: none; min-width: 100px; border-radius: 50px; line-height: 13px; } .table-title .add-new i { margin-right: 4px; } table.table { table-layout: fixed; } table.table tr th, table.table tr td { border-color: #e9e9e9; } table.table th i { font-size: 13px; margin: 0 5px; cursor: pointer; } table.table th:last-child { width: 100px; } table.table td a { cursor: pointer; display: inline-block; margin: 0 5px; min-width: 24px; } table.table td a.add { color: #27C46B; } table.table td a.edit { color: #FFC107; } table.table td a.delete { color: #E34724; } table.table td i { font-size: 19px; } table.table td a.add i { font-size: 24px; margin-right: -1px; position: relative; top: 3px; } table.table .form-control { height: 32px; line-height: 32px; box-shadow: none; border-radius: 2px; } table.table .form-control.error { border-color: #f50000; } table.table td .add { display: none; } $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); var actions = $("table td:last-child").html(); // Append table with add row form on add new button click $(".add-new").click(function(){ $(this).attr("disabled", "disabled"); var index = $("table tbody tr:last-child").index(); var row = '' + ' '; $("table").append(row); $("table tbody tr").eq(index + 1).find(".add, .edit").toggle(); $('[data-toggle="tooltip"]').tooltip(); }); // Add row on add button click $(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"); } }); // Edit row on edit button click $(document).on("click", ".edit", function(){ $(this).parents("tr").find("td:not(:last-child)").each(function(){ $(this).html(''); }); $(this).parents("tr").find(".add, .edit").toggle(); $(".add-new").attr("disabled", "disabled"); }); // Delete row on delete button click $(document).on("click", ".delete", function(){ $(this).parents("tr").remove(); $(".add-new").removeAttr("disabled"); }); });' + ' ' + ' ' + ' ActiveInactive ' + '' + actions + ' ' + '
在这个示例中，我们添加了一个日期输入框和一个下拉菜单，并修改了 jQuery 代码来验证这些输入框。如果用户尝试添加一个空的日期或未选择下拉菜单选项，相应的输入框的边框将会变成红色，提示用户输入有效的数据。
注意事项
选择器扩展性： 根据实际需求，可以进一步扩展选择器，以包含其他类型的输入框，例如 textarea、checkbox 等。验证逻辑： !$(this).val() 只检查输入框是否为空。对于更复杂的验证需求，例如日期格式验证或数值范围验证，需要添加额外的验证逻辑。用户体验： 除了边框颜色变化，还可以考虑添加更友好的错误提示信息，例如在输入框下方显示错误消息。动态添加的元素： 如果通过 AJAX 等方式动态添加新的输入框，需要确保 jQuery 代码能够正确地绑定到这些新元素上。可以使用 $(document).on() 来处理动态添加的元素。
总结
通过修改 jQuery 选择器，可以轻松地扩展 Bootstrap 表格的验证功能，使其能够验证各种类型的输入框。这有助于确保数据的完整性和准确性，并提供更好的用户体验。在实际应用中，可以根据具体需求进行定制，以满足不同的验证需求。
以上就是使用 jQuery 验证 Bootstrap 表格中非文本输入框的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1575701.html
微信扫一扫 
支付宝扫一扫 
