使用 JavaScript 处理 HTML5 类型的 'email'、'url'

Question

拥有

<input type="email" name="myEmail" />

我想通知 JavaScript 输入的输入是否是电子邮件。 'url' 和其他 HTML5 输入类型也是如此。

简单地说 - 如果 HTML5 类型要求已满足，是否有任何“标志”或任何表示？

Answer 1

Element.validity 是一个包含许多有用内容的属性。其中最简单的是valid，它只是告诉你它是否有效。

document.getElementById('test').oninput = function() {
  document.getElementById('result').textContent = this.validity.valid ? "Valid!" : "Invalid."
};

<input type="email" id="test" />
<div id="result"></div>

更多详情，请查看specification

Answer 2

你可以查看validity.valid的状态

document.getElementById("email").addEventListener("change", function() {
  
  console.log(this.validity.valid)  
  
});

<input type="email" id="email"/>

Answer 3

您可以使用required 参数：

<input type="email" required>

所以它会使用浏览器检查电子邮件，但实际上它并不完美。即使您没有编写 TLD，asd@asd 之类的内容也是有效的。

您也可以使用pattern 参数参数来使用正则表达式。

 <input type="email" required pattern="[a-zA-Z0-9-_]*@[a-zA-Z0-9-_]*\.[a-z]{2,4}">

（小心这个正则表达式大部分是错误的/坏的）

但实际上你的目标是更新的浏览器，并不是每个浏览器都会有这个功能。

最好的方法是使用 Javascript 使用正则表达式进行验证，就像我已经写过的那样。您应该搜索适合您要求的表达式，因为互联网上有很多表达式。

不要忘记客户端发生的所有事情都可能被利用。使用 Chrome，您只需按 F12 并更改 Javascript 部分以检查验证。 当然，您还应该在服务器端脚本中执行 RegEx。

Javascript 和服务器端检查（如 PHP）应该在大多数浏览器中工作，因为浏览器不关心服务器端活动，并且 Javascript 从 IE1（？）或至少从早期浏览器开始就存在。