Question

我正在编写一个程序，该程序允许用户使用拖放式GUI创建页面。每个元素（图像，文本等）都将具有易于使用的CSS选择器，例如background-color和font-size，但是我的客户要求在必要时向该元素添加自定义CSS作为最终选择的功能

要避免用户可能输入并保存有效的javascript函数，设置样式标签等样式的危险。（我将确保通过转义/ PDO处理PHP中的用户输入来解决此问题），我该如何编写一个正则表达式（或其他功能），用于粗略测试用户输入的内容是否为有效的CSS。目前，我的正则表达式是：

([A-Za-z\-]+?:\s*?[A-Za-z\-]+?;)+?;

然后我用

运行它

var reg = /([A-Za-z\-]+?:\s*?[A-Za-z\-]+?;)+?/;

if (reg.test(textarea.val())) {
    console.log("yay");
    //add CSS to element
} else {
    console.log("nay");
    //let user know their input is wrong
}

这可以很好地进行验证

css-selector: css-value;

但是，此后所有内容仍将验证为true，因为第一部分为true：

css-selector: css-value;
invalid-css is here!

对于我的粗略意思，我发现仅需检查的就是：和a的存在。带有文本，可能还有-之间，则不必检查css-selector本身是否实际上作为CSS属性存在，也不必检查CSS值是否是所述选择器的有效值。

有没有办法确保整个输入值必须为真？

作为最后的提示，如果您发现与插入脚本标签或样式化可能要改变的整页元素没有直接关系的潜在危险，请告诉我

编辑：由于有很多说法我无法验证 real CSS，因此我将进一步说明我的要求；首先，有效的正则表达式：

css-selector: css-value;
other-css-selector: other-css-value;

无效的正则表达式：

css-selector: css-value;
invalid-css is here!

第二，我想要的东西可以验证我是否可以将字符串传递给：

$(element).css(validated-string);

并让chrome处理所应用的内容是否真正有效，就像您实时编辑CSS一样

其次，我提到了PHP验证，但是我想实时更新CSS，以便用户在添加内容时可以看到其编辑效果

Answer 1

作为正则表达式，您可以使用^([A-Za-z\-]+?:\s*?[0-9A-Za-z\-%]+?;\s*?)*?$，但是我仍然不太确定它会丢弃所有无效的CSS。如果您有test: 100something;对正则表达式有效，但对CSS无效。

使用正则表达式验证用户输入为CSS？

1 个答案: