6

你好,互联网上的好心人,我已经研究了一段时间......并且看过几个类似的帖子,但我似乎无法弄清楚:

HTML5 输入字段验证 CSS 可在 Firefox、Chrome 中使用……但可惜,在 IE8 中不起作用……而且我的大部分目标受众都将使用 IE8。

...是的:我正在使用 Modernizr,并且我使用 Initializr 来获取页面模板和 CSS...我有点困惑,为什么我无法在 IE8 中正常工作。

这是我的测试页面的链接: Test html5 page

在正确输入之前输入字段是红色的,然后在输入有效的帐号时验证会变成绿色,例如:50011111111

HTML5 代码如下:

<label for="account">Account Number: </label> 
<input id="account" name="inputAccount" 
  placeholder="input billing account number" 
  pattern="/(^500)|^\d{11}" 
  required
  autofocus
  type="text"/>

任何关于什么可能是一个相当简单的修复问题的建议将不胜感激!

4

4 回答 4

13

IE 只是忽略 HTML5 元素,因为它不知道它们。来自 Modernizr 文档

Modernizr 在 JavaScript 中运行一个小循环,以启用来自 HTML5(以及 abbr)的各种元素,以便在 Internet Explorer 中进行样式设置。请注意,这并不意味着它突然让 IE 支持 Audio 或 Video 元素,它只是意味着您可以使用 section 而不是 div 并在 CSS 中设置它们的样式。

这意味着 Modernizr 将告诉 IE HTML5 中的新标签,以便您可以在它们上使用 CSS,但实际上并没有让它们做任何事情。另请注意,Modernizr 不会为元素添加默认样式,因此他们建议您使用 HTML5 CSS 重置,例如制作<section>标签。display: block;

关于您的表单验证,topek 在解释 Modernizr 仅检测浏览器功能时是正确的,它实际上并没有做任何事情。Modernizr 背后的过程是您使用内置的 yepnope 测试功能来查看用户的浏览器是否可以执行“x”(在本例中为表单验证),然后有条件地和异步地将脚本或样式加载到“polyfill”(礼貌说'使用javascript来模仿本机行为)的方式。

在您的情况下,您将希望用于Modernizr.load()测试Modernizr.input.required并且可能Modernizr.input.autofocus也使用,如下所示:

 //the modernizr conditional load function
 Modernizr.load({
     //specify the tests, refer to the Modernizr docs for object names
   test: Modernizr.input.required && Modernizr.input.placeholder,
     //specify what to do if the browser fails the test, can be a function
   nope: 'path/to/polyfill/script',
     //sometimes you need to run some JS to init that script
   complete: function(){ polyfillinitorwhatever(); }
 });

你去了,一个相当精简的 Modernizr.load。虽然我发现他们的文档曲折,但它们实际上非常好。每次我遇到问题并在 Paul Irish 上发推文时,他都会发回一个文档链接,我在仔细检查后确实找到了我的答案。

验证是浏览器制造商作为标准实施的最复杂的 HTML5 功能之一。虽然我真的很喜欢它的简单性,但我在所有情况下都继续使用 jQuery.validate,除非用户有 Chrome 或 Opera - FF 原生验证仍然很弱。我建议你现在坚持使用 jQuery。

于 2012-02-21T13:41:03.693 回答
3

我最近发现了一个新插件jquery.h5form

使用这个,表单验证,就像在 Opera 中一样,将在所有浏览器中启用,甚至是 IE8。

于 2012-06-13T06:53:35.780 回答
1

IE8 不支持所有(如果有的话)HTML5 元素。您需要一个插件才能使 html5 正常工作。一个插件是现代化的

具有 HTML5 分数/兼容性的浏览器列表

于 2011-10-31T21:58:49.783 回答
1

我认为,您仍然缺少的是用于字段验证的 html5 polyfill。您可以使用例如:http ://ericleads.com/h5validate/

更多 polyfill 可以在以下位置找到:https ://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

于 2011-10-31T21:51:30.843 回答