[译]HTML 表单验证 - 文蔺的博客 @wemlion

原文作者:@Raymond Camden
原文地址:https://www.raymondcamden.com/2016/10/19/using-html-form-validation-in-pure-javascript
中文翻译:文蔺
译文地址:http://www.wemlion.com/2016/using-html-form-validation-in-pure-javascript/
本文由 @文蔺翻译，转载请保留此声明。
著作权属于原作者，本译文仅用于学习、研究和交流目的，请勿用于商业目的。

我是 HTML 表单验证（HTML form validation）的超级粉丝，因为它取代了我使用了近 20 年的 JavaScript 代码。不幸的是，Safari 并不支持这个特性（谈到 Web 时，先别跟我提 Apple 和他们的优先级）。

不过，我确实很喜欢这个主意，将问题交给 HTML 自己解决。实际上，最近有个网站展示了许多类似的例子：You Might Not Need JavaScript。如果还没看过，赶紧点开吧。这是一个极好的例子，展示了 HTML 和 CSS 可以如何取代我们使用了多年的 JavaScript 片段。

基于上面这些，今天早上，我倒产生了另外一些差不多完全相反的想法。可以在纯 JavaScript 表单中使用基于 HTML 的表单验证么？答案是可以（当然，首先浏览器得支持）。假如我们可以使用 createElement 动态创建 DOM 元素，那么能够在 JavaScript 代码中添加简便的 email 验证么？似乎可以：

var element = document.createElement('input');
element.setAttribute('type','email');
element.value = 'foo@foo.com';
console.log(element.validity.valid);

上面这段代码所做的工作是创建一个离线 input 元素（译者注：原文为 virtual input element，但译者认为 virtual 的说法似乎有些歧义，看看最近两年火爆的 virtual DOM，还敢叫说 createElement 创建出来的活生生的元素是 virtual elment 么？倒是让我想起 offline canvas，是故借用），将它的 type 属性设置为 email 并设置其 value 为某一个值。然后就打印出这个值的有效状态了。可以重写这段代码，封装成函数：

var elm;
function isValidEmail(s) {
  if(!elm) {
    elm = document.createElement('input');
    elm.setAttribute('type', 'email');
  }
  elm.value = s;
  return elm.validity.valid;
}

console.log(isValidEmail('foo'));
console.log(isValidEmail('goo@goo.com'));
console.log(isValidEmail('zoo'));

我不太喜欢这段代码中引入了一个全局变量，不过这样可以缓存 DOM 元素，也还不错。如果封装在模块中，就将它保存在本地变量中吧。

还是那句话，代码在不支持 HTML 表单验证的浏览器中没法工作。但这确实非常简单，对吧？同样还可以用这种办法验证 URL 或者其他内容。不知亲爱的读者您对此作何评论？

可以在 JSBin 中运行代码看看效果： https://jsbin.com/diqepa/edit?js,console。

若您喜欢本文, 可以看下我的 Amazon Wishlist 帮我实现愿望，或者通过 PayPal 捐款支持我。还可以订阅邮件推送获取最新信息。

原文作者：@Raymond Camden
原文地址：https://www.raymondcamden.com/2016/10/19/using-html-form-validation-in-pure-javascript
本译文仅用于学习、研究和交流目的，转载请保留原文出处

[译] HTML 表单验证