Non existing Attributes HTML Input Field

问题

Is it good practice to attach an non existing attribute to an html element in order to use it in jquery. For example

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

then simply use jquery to select all elements which contain an attribute called valrule and parse the regex string.

Is this a 'no-go' as far as programming standards and best practices go?

回答1:

You should use the prefix data-<myAttribute>. It is supported by HTML5, other browsers will ignore it and you can access it easily with jQuery using the .data() method.

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

and you can retrieve that information like so :

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

回答2:

Use HTML5 data- prefix for new attribute like this:

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

Its valid HTML 5..

http://ejohn.org/blog/html-5-data-attributes/

回答3:

You definitely can. Although HTML5 introduced what's called data- attributes, allowing to set non-standard attributes to elements in a standard way.

You simply prefix the attribute names with data-

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

Although, this is introduced in HTML5, you can still use it with documents for HTML4.

---

Using jQuery (1.4.3+), the data- attributes can be accessed with .data() - or via .attr().

回答4:

I personally wouldn't do that. Some browsers ignore "non-existing" attributes when parsing HTML, therefore these attributes wouldn't be saved in the browser page DOM. When jQuery selectors are executed, they may not find this attribute.

If you are guaranteed to run in HTML5-compliant browsers, then you can use HTML5 data- prefix for your attributes, e.g.

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

However this still may not work if you run in older browsers. For example, it turns out that almost half of our clients are using IE7 with no plans to upgrade (moving with the speed of government).

来源：https://stackoverflow.com/questions/9684323/non-existing-attributes-html-input-field