Question

我正在尝试使用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

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

Answer 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 /
.*?：匹配任何字符。时间
|：或正则表达式

Answer 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

Answer 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')之后使用。

Answer 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);
    });
});

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

4 个答案: