javascript - 在旧浏览器上模拟 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 中添加了对无法识别 标签的支持，这本身就是一个巨大的功能)。

Modernizr 用于特征检测。它可以告诉您您的浏览器支持或不支持诸如电子邮件类型属性之类的东西。

填充

您需要的是 polyfill喜欢Webshim .它有能力用 javascript 驱动的解决方案替代一些缺失的浏览器功能。就像表单验证一样。

polyfill 的一个共同特征是它们不会替换您浏览器中的现有功能。它们仅在浏览器缺少该功能时激活。不过也有异常(exception)。

有一个 HUGE number of polyfills available 用于大多数功能。对于 forms alone有很多。他们中的大多数人都会按照您的意愿行事。

网络服务

我选择了 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>
   

如果您有任何关于使它正常工作的问题，请随时提出。