javascript - 不存在的属性 HTML 输入字段

Question

将不存在的属性附加到 html 元素以便在 jquery 中使用它是一种好习惯吗？例如

<input type="text" valrule="someregexstring" />

然后只需使用 jquery 选择包含名为 valrule 的属性的所有元素并解析正则表达式字符串。

就编程标准和最佳实践而言，这是“不行”吗？

score 6 · Accepted Answer

您应该使用前缀data-<myAttribute>。它是 HTML5 支持的，其他浏览器会忽略它，您可以使用 jQuery 使用该.data()方法轻松访问它。

<input  id="myInput" type="text" data-MySuperMassiveAttribute="Awesome"/>

您可以像这样检索该信息：

var howAmI = $('#myInput').data('MySuperMassiveAttribute');
alert(howAmI); // now everybody knows how awesome you are ;-)

score 3 · Accepted Answer

对新属性使用 HTML5 data- 前缀，如下所示：

<input type="text" data-valrule="someregexstring" />

其有效的 HTML 5..

score 2 · Accepted Answer

你绝对可以。尽管 HTML5 引入了所谓的数据属性，允许以标准方式为元素设置非标准属性。

您只需在属性名称前面加上data-

<input type="text" data-valrule="someregexstring" />

虽然这是在 HTML5 中引入的，但您仍然可以将它用于 HTML4 的文档。

使用 jQuery (1.4.3+)，可以使用.data()或通过.attr()访问data-属性。

score 0 · Accepted Answer

我个人不会那样做。一些浏览器在解析 HTML 时会忽略“不存在”的属性，因此这些属性不会保存在浏览器页面 DOM 中。当 jQuery 选择器被执行时，他们可能找不到这个属性。

如果您保证在兼容 HTML5 的浏览器中运行，那么您可以data-为您的属性使用 HTML5 前缀，例如

<input type="text" data-valrule="someregexstring" />

但是，如果您在较旧的浏览器中运行，这仍然可能不起作用。例如，事实证明，我们几乎一半的客户都在使用 IE7，但没有升级的计划（随着政府的速度移动）。

4 回答 4