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

Posted 2023-02-22

【中文标题】使用 JavaScript 处理 HTML5 类型的 \'email\'、\'url\'

【英文标题】：Handling HTML5 types 'email', 'url' with JavaScript使用 JavaScript 处理 HTML5 类型的 'email'、'url'

【发布时间】：2015-05-30 18:41:18

【问题描述】：

拥有

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

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

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

【问题讨论】：

required Attribute?

Html5 具有检查输入类型的基本验证。如果您想要任何特定的验证，您可以使用正则表达式。

必填属性将确保用户提交表单时输入字段不留空。

【参考方案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

【讨论】：

我试过adee@coinachgaaaaaa，它说有效！不太好。

正如 Adeel 所说，它不是 100% 工作的。我意识到这取决于浏览器对电子邮件类型的解释。不过，我很感谢您的回答，并且将来一定会使用它。谢谢！

但是adee@coinachgaaaaaa 是一个有效的电子邮件地址。它可能存在，但它是有效的。

【参考方案2】：

你可以查看validity.valid的状态

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

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

【参考方案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（？）或至少从早期浏览器开始就存在。

【讨论】：

我一定会用我的[e-mail]避开你的网站

即使我写了 （小心这个 RegEx 大多是错误的/坏的） ，我还是想避免有人使用其中包含子域的电子邮件。但是，如果我们应该计算（已经错误/错误清除的）RegEx 的错误部分，我们还应该说存在 .com.tr 之类的***域名，所以[a-z]2,4 也不完美。

没错，你做到了，但即使有一个免责声明，建议使用正则表达式检查电子邮件地址也是really bad idea。

为什么？什么是好方法？因为他们可能没有完美的解决方案？ "其中可能存在 [...]"

的错误

既然你们都是对的，我现在有一个巨大的难题，我应该检查哪个答案是正确的