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

Question

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

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

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

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

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 returns -1），那么您需要 return true 因为这个单词是有效的。

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

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

Working example

请注意，在示例中我删除了错误消息抑制，因此您可以看到代码有效。

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

Answer 2

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

The actual method implementation, returning true if an element is valid.

JQuery的inArray方法returns -1是元素是NOT找到的，索引项目如果是。

看看你的方法 returns true 如果元素 IS 在你的黑名单中找到 - 所以它基本上是错误的方法。

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

此代码应该有效

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

Answer 3

有几个问题：

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

我建议把你的黑名单变成正则表达式。这将使您的代码非常简洁：

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

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

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

Validate input value against blacklist array

validation

jquery

jquery-validate