根据黑名单数组验证输入值

Question

我目前正在使用jQuery Validation，我有一个包含四个输入字段的表单 - 单词、国家/地区、年龄和性别。

国家、年龄和性别验证没有任何问题，但 Word 不想验证 - 我试图让 Word 值在验证之前根据黑名单检查其自身，我试图阻止用户提交冒犯性单词。

目前，无论我在 Word 输入字段中输入什么单词，它总是显示为错误并且不想验证。

如果有人能看出我哪里出错了，我将不胜感激！

Screenshot

JS

 /* Blacklist Array */
    var blacklist = ['foo', 'bar', 'fizz', 'buzz', /* many more banned words... */ ];

    /* Blacklist Validation */
    jQuery.validator.addMethod("word", function(value) {
      var in_array = $.inArray(value, blacklist);
      if (in_array == -1) {
        return false;
      } else {
        return true;
      }
    });

    /* Submit Validation */
    $("#submit").validate({
      errorPlacement: function(error, element){},
      rules: {
        word: {
          required: true
        },
        country: {
          required: true
        },
        age: {
          required: true
        },
        sex: {
          required: true
        }
      },
      submitHandler: function(form) {
        alert('Submitted');
      }
    });

HTML

  <form methord="post" name="wordsubmit" id="submit">
    <div class="inner">
      <input class="word" name="word" placeholder="Your Word" type="text"/>
      <select class="country" name="country" size='1'>
        <option value="">Your country</option>
      </select>
      <select class="age" name="age" size='1'>
        <option value="">Age</option>
        <option value="18-24">18-24</option>
        <option value="25-34">25-34</option>
        <option value="35+">35+</option>
      </select>
      <select class="sex" name="sex" size='1'>
        <option value="">Sex</option>
        <option value="Male">Male</option>
        <option vlaue="Female">Female</option>
      </select>
    </div>
    <input class="submit" name="submit" type="submit" value="Submit"/>
  </form>

Answer 1

你添加的word方法中的逻辑是倒退的；如果在数组中找不到输入的单词（即$.inArray 返回-1），那么您希望返回true，因为该单词是有效的。

既然如此，您可以将逻辑简化为：

/* Blacklist Validation */
jQuery.validator.addMethod("word", function(value) {
    return $.inArray(value, blacklist) == -1;
});

Working example

请注意，在示例中我删除了错误消息抑制，以便您可以看到代码正常工作。

还值得确保黑名单数组中的值的大小写一致，因此您可以使用value.toUpperCase() 或value.toLowerCase() 将输入的单词转换为相同的大小写，因为目前FoO 不会' t 匹配 foo 并将被标记为有效。

Answer 2

有几个问题：

• 您使用toUpperCase()（在您的原始问题中）与只有小写单词的列表进行比较。我想你打算使用toLowerCase()；
• 你以相反的方式返回false/true。当在黑名单中找不到单词时，您需要返回true（返回值-1）
• 您根据黑名单检查整个输入，因此一旦输入包含多个单词，验证将永远不会在黑名单中找到它，即使其中一个输入单词可能被列入黑名单。

我建议将您的黑名单转换为正则表达式。这将使您的代码非常简洁：

var blacklist = /\b(foo|bar|fizz|buzz)\b/; /* many more banned words... */

jQuery.validator.addMethod("word", function(value) {
    return !blacklist.test(value.toLowerCase());
});

Answer 3

addMethod 的文档中提到了传入的函数：

实际的方法实现，如果元素有效则返回true。

JQuery 的inArray 方法返回-1 是NOT找到的元素，如果是则返回item的索引。

查看您的方法，如果在您的黑名单中找到元素 IS，它将返回 true - 所以它基本上是错误的方式。

---

此外，正如我评论的那样，您正在对输入的 value 执行 toUpperCase（您随后将其删除） - 但是，如果您希望黑名单检查不区分大小写，您可能需要转换用户输入的值无论您的黑名单有什么大小写 - 所以要么让您的黑名单完全小写并在值上使用toLowerCase()，或者让黑名单全部大写并在值上使用toUpperCase()。

---

这段代码应该可以工作

jQuery.validator.addMethod("word", function(value) {
  var in_array = $.inArray(value.toLowerCase(), blacklist);
  return in_array == -1;
});