处理HTML类型"电子邮件"，'url'使用JavaScript

Question

具有

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

我想通知JavaScript输入的输入是否是通过电子邮件发送的。"url"和其他HTML输入类型也是如此。

是否有任何"标志"或任何信号表明HTML类型要求已经得到满足？

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>

有关更多详细信息，请查看规范

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}">

（小心这个RegEx大部分是错误的/坏的）

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

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

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

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