javascript - 防止提交空字段(包括空格)的最有效的js/jquery方法

Question

我在自定义 CMS 中有一个高级搜索表单。我需要检查以确保用户不会在未填充至少一个字段的情况下尝试提交表单。没问题;这是一个非常精简的版本:

var noText = false;

if(!$('#advancedId').val() && !$('#advancedTitle').val() && 
    $('#advancedCoupon').val() && !$('#advancedDesc').val() ) {
     noText = true;
}


if(noText) {
    alert("You haven't provided any search terms. Please fill in/select at least one field.");
    noText = false;
    return false;
}

但是我们有一个 QA 人员，他只需要真正做好他的工作，并故意尝试我们的客户永远不会做的搜索。他提交了一个错误，表明如果他在每个字段中输入一个空格，它就会通过并尝试提交。

所以我尝试像这样 trim 值:

if(!$('#advancedId').val().trim() && !$('#advancedTitle').val().trim() && 
    $('#advancedCoupon').val().trim() && !$('#advancedDesc').val().trim() ) {
    noText = true;
}

如果我实际上在所有字段中输入了一个空格，这当然是有效的，但如果我尝试在一个字段中输入空格，而在字段中没有任何内容，则会抛出“无法读取 null 的属性‘trim’”错误其他的。

是的，我可以做这样的事情:

if($('#advancedId').val()) {
   $('#advancedId').val($('#advancedId').val().trim());
}

是的，我可以使用三元组将其缩短一些，但我仍然需要对十多个字段执行此操作。有更好的方法吗？

Answer 1

我可能会选择所有这些，然后进行过滤。尽管为了使其耦合不那么紧密，我可能会在它们上放置一个类并用它来选择而不是所有 id。

//select all the fields concerned and filter on them for non-blank values
var nonBlankFields = $('#advancedId, #advancedTitle, #advancedCoupon, #advancedDesc').filter(function(){
  //default to an empty string if for some reason the value doesn't exist
  return ( this.value || '' ).trim().length > 0
});

if (!nonBlankFields.length) {
    alert("You haven't provided any search terms. Please fill in/select at least one field.");
    return false;
}