检查输入字段是否包含特定文本

I'm trying to find if what the user typing in to an input field contain certain text - I've kinda got it works, but only working for an exact match as opposed to a partial match. If a user types anything before the text i'm matching, of course the code doesn't trigger.

我试图找出用户输入到输入字段的内容是否包含某些文本 - 我有点工作，但只能用于完全匹配而不是部分匹配。如果用户在匹配的文本之前键入任何内容，当然代码不会触发。

What i need to do is check if the input contains @nyu.edu at all in the input field.

我需要做的是在输入字段中检查输入是否包含@ nyu.edu。

$('.email').keyup(function(){
    if ($(".email").val() == "@nyu.edu") {
        $("p.warning").css("visibility", "visible");
    }
    else if ($(".email").val() != "@nyu.edu") {
        $("p.warning").css("visibility", "hidden");
    }
});

4 个解决方案

#1

Checking if a string contains a substring is pretty easily done by taking haystack.indexOf(needle) and checking against -1 (not found).

检查字符串是否包含子字符串很容易通过取haystack.indexOf（针）并检查-1（未找到）来完成。

if ($(".email").val().indexOf("@nyu.edu") !== -1) {
    // contains
} else {
    // does not contain
}

There is a function in the ES6 draft which you may find more natural, called includes

ES6草案中有一个功能，您可能会发现它更自然，称为包含

You can add support for ES6's String.prototype.includes like this

您可以添加对ES6的String.prototype.includes的支持

if (!String.prototype.includes) {
    String.prototype.includes = function (needle, pos) {
        return this.indexOf(needle, pos || 0) !== -1;
    };
}

"foobar".includes('foo'); // true

#2

Working Ex:

工作前：

http://codepen.io/anon/pen/XJKMjo

$('.email').keyup(function() {
    var exp = /@nyu\.edu$/; // reg ex
    var input = $(this).val(); // email input
    var matches = exp.test(input); // boolean
    // changes to hidden or visible
    $("p.warning").css("visibility", (matches) ? "visible" : "hidden");
});

#3

You can filter based on HTML elements' attribute contents with jQuery to either contain, start, or end with a string that you want. To match elements with an attribute that contain a string, you'd use [attr*="value"] in your jQuery selector, but I think that you want something where the end matches your string. Here's how that would work:

您可以使用jQuery基于HTML元素的属性内容进行过滤，以包含，开始或结束您想要的字符串。要使用包含字符串的属性匹配元素，您需要在jQuery选择器中使用[attr * =“value”]，但我认为您需要一些结尾与您的字符串匹配的内容。这是如何工作：

var elements = $(".email[value$='@nyu.edu']");
if(elements.length > 0) {
    // Do something with the elements, such as removing an .error class
} else {
    // Email doesn't end with @nyu.edu
}

Read more about the jQuery ends-with attribute selector or browse through other attribute selectors like this.

阅读有关jQuery结尾的更多信息 - 使用属性选择器或浏览其他属性选择器。

#4

-1

jsBin demo

jsBin演示

var $warning = $("p.warning"); // P.S. make sure not to target a wrong .warning!
$('.email').on("input", function(){
    $warning.toggle( /@nyu\.edu/ig.test(this.value) );
});

as I've mentioned .warning being a class can represent any first .warning occurrence. use rather some other selector like .next() or .closest(selector).find(".warning")

正如我所提到的。警告是一个类可以代表任何第一次警告发生。使用相当一些其他选择器，如.next（）或.closest（选择器）.find（“。警告”）

your boss fill fire you if your client loses $$$ cause you forgot to watch for copy-paste cases. ;) Kidding, use "input" event.

如果你的客户失去了$$$，你的老板会解雇你，因为你忘了看复制粘贴案件。 ;）开玩笑，使用“输入”事件。

P.S use .warning{display:none;} instead of visibility

P.S使用.warning {display：none;}而不是可见性

#1