在旧浏览器上模拟 html5 电子邮件验证

Question

<form>
<input type="email" required>
<input type="submit" value="Submit">
</form>

在 HTML5 浏览器上，如果您在未填写任何内容的情况下点击提交，您会收到“请填写此字段”通知。如果您输入文本但它不是有效的电子邮件，您将收到“请在电子邮件地址中包含一个 '@'。'whatever' 缺少一个 '@'”。

据我了解，modernizr 应该通过使用 javascript 使这些 HTML5 功能在非 HTML5 浏览器上运行。即。

<script src="modernizr.js"></script>
<form>
<input type="email" required>
<input type="submit" value="Submit">
</form>

不幸的是，它不起作用。我是否只需要重写代码以不使用这种 HTML5 方法（而是使用另一种方法）还是有一些 javascript 库可以在非 HTML5 浏览器上神奇地模拟此功能？

谢谢！

Answer 1

现代化

Modernizr 不会向您的浏览器添加任何功能（除了html5shiv，它在旧 IE 中添加了对 unrecognized 标签的支持，这本身就是一个巨大的功能）。

Modernizr 用于特征检测。它可以告诉您您的浏览器是否支持电子邮件类型属性。

Polyfills

您需要的是polyfill，例如Webshim。它能够用 javascript 驱动的解决方案替换一些缺少的浏览器功能。类似于表单验证。

polyfill 的一个共同特点是它们不会替换浏览器中的现有功能。它们仅在浏览器缺少该功能时才会激活。不过也有例外。

大多数功能都有一个HUGE number of polyfills available。对于forms alone，有很多。他们中的大多数人都会做你想做的事。

Webshim

我之所以选择 Webshim，是因为我听说过作者。

它有很多配置选项，但这两个步骤应该足够了：

1. 在页面的任何位置包含 javascript。您还需要在之前包含jQuery，因为 Webshim 依赖于它：

   <script src="js/jquery.js"></script>
   <script src="js-webshim/minified/polyfiller.js"></script>
   

2. 启动 polyfill。

   <script>
     webshim.polyfill('forms');
   </script>
   

如果您对这项工作有任何其他问题，请随时提问。