处理 HTML5 类型 'email'、'url' 和 JavaScript

Question

有

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

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

简单地说 - 是否有任何 'flag' 或任何信号表明 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 parameter 参数来使用正则表达式。

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

（注意这个 RegEx 大部分是 wrong/bad）

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

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

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

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

处理 HTML5 类型 'email'、'url' 和 JavaScript

Handling HTML5 types 'email', 'url' with JavaScript

javascript

html

html-email

email-validation

html-validation