如果字符串与 jquery 中的一行匹配，则禁用按钮答案

【问题标题】：Disable button if a string is matched from a line in jquery如果字符串与 jquery 中的一行匹配，则禁用按钮
【发布时间】：2015-06-16 07:05:08
【问题描述】：

我正在尝试使用jquery-1.10.2 构建一个网站，我想在其中阻止与css 相关的字符串，例如<style>、<link> 等。如果这些字符串中的任何一个匹配，我想禁用提交按钮。到目前为止，我已经设法使用.keyup() 函数阻止它们，但是如果我写的标签比<link rel="stylesheet" href="css/bootstrap.min.css"> 之类的标签多，那么它就不起作用了。这是我的代码，

$(document).ready(function () {
    $('#inputdivEditor-2').keyup(function () {
        var input = $(this).val();
        if (input == "<style>" || input == "</style>" || input == "<link>") {
            $('#deactivedivEditor-2').attr("disabled", "disabled");
        }else{
            $('#deactivedivEditor-2').removeAttr("disabled");
        }
    });
});

JSFiddle Demo

如果这些字符串中的任何一个与任何行匹配，我如何禁用该按钮？非常需要这个帮助。谢谢。

【问题讨论】：

标签： javascript jquery html regex

【解决方案1】：

您可以使用regex 来检查文本是否包含某种模式。

$(document).ready(function () {
    var regex = /<\/?style.*?>|<link.*?>/;
    $('#inputdivEditor-2').keyup(function () {
        var val = $(this).val();

        $('#deactivedivEditor-2').prop('disabled', regex.test(val));
    });
});

演示：http://fiddle.jshell.net/tusharj/52xd3s11/

正则表达式

/ ：regex 的分隔符
\/?：匹配 0 或 1 /
.*?：匹配任意字符任意编号。次数
|: 正则表达式中的或

【讨论】：

【解决方案2】：

您可以使用以下正则表达式来匹配这些字符串。

var regex = /<(style|link)>/;

当元素存在时禁用更新。然而，这并不能解决所有情况。如果有人想要，他可以通过编写< style > 或使用不同的编码等来绕过正则表达式。

在我看来，更好的选择是从浏览器的角度查看内容。换句话说，获取输入并从中制作一个元素：

var dummyElement = $('<div></div>');
dummyElement.html(input); //contents of the input field
if(dummyElement.find('style').length > 0) {
    //you get the point
}

..因为 SO 上有一个问题，这解释了为什么不使用正则表达式解析 HTML .. RegEx match open tags except XHTML self-contained tags

【讨论】：

【解决方案3】：

只需使用正则表达式检查< > 之间的任何内容，如下所示：

DEMO

$(document).ready(function () {
    $('#inputdivEditor-2').keyup(function () {
        var input = $(this).val();
        var regex=/<*>/;
        if (regex.test(input)) {
            $('#deactivedivEditor-2').attr("disabled", "disabled");
        } else {
            $('#deactivedivEditor-2').removeAttr("disabled");
        }
    });
});

您可以将.prop('disabled',true) 用于禁用按钮，将.prop('disabled',false) 用于启用按钮。两者都在$('#deactivedivEditor-2')之后使用。

【讨论】：

【解决方案4】：

首先，您可以使用正则表达式来检查字符串在任何位置的模式。我在下面显示的正则表达式匹配两个角括号之间的任何内容 - 甚至非 html 标记也是如此。

其次 - 这有点离题 - 使用 jquery 设置和禁用“禁用”属性的最佳和推荐解决方案是使用 .prop() 方法


$(document).ready(function () {
    $('#inputdivEditor-2').keyup(function () {
        var inputValue = $(this).val();
        var regexp = /]*?>/;
        var isDisabled = regex.test(inputValue);

        $('#deactivedivEditor-2').prop("disabled", isDisabled);
    });
});

【讨论】：