Question

你好，互联网的人，我一直在讨厌这个问题......并且看过几个类似的贴子，但我似乎无法弄清楚这一点：

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"/>

任何关于修复可能是一件相当简单的事情的建议都会非常感激！

Answer 1

IE只是忽略HTML5元素，因为它不知道它们。来自Modernizr docs

Modernizr在JavaScript中运行一个小循环来启用来自HTML5（以及abbr）的各种元素，用于在Internet中进行样式化资源管理器。请注意，这并不意味着它突然使IE支持音频或视频元素，它只是意味着你可以使用节而不是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。虽然我发现他们的文档蜿蜒，但实际上他们非常好。每当我遇到问题并在保罗爱尔兰语发推文时，他都会发回一个指向文档的链接，我会在仔细检查后找到答案。

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

Answer 2

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

使用此功能，将在所有浏览器中启用表单验证，如Opera，即使是IE8。

Answer 3

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

可以在https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

下找到更多的填充物

Answer 4

IE8不支持所有HTML5元素（如果有的话）。你需要有一个插件供html5使用。一个插件是modernizer

List of browsers及其在HTML5中的得分/兼容性

HTML5输入验证在IE8中不起作用

4 个答案: