javascript - javascript 程序可以读取 `type="email "` of ` input` 元素给出的验证结果吗？

Question

在 HTML 中，input 元素的 type="email" 可以验证输入字符串是否具有有效的电子邮件格式。

我想编写一个 JavaScript 程序，当此类 input 元素的输入字符串具有或不具有有效的电子邮件格式时，该程序的行为会有所不同。

javascript程序可以读取input元素的type="email"给出的验证结果吗？如果不是，为什么？

或者我是否必须在 Javascript 中实现电子邮件格式的验证？

谢谢。

Answer 1

您可以使用 :invalid 伪选择器和 querySelectorAll。在以下两个电子邮件输入中 - 一个具有无效的值集，另一个具有有效的电子邮件。 CSS 样式(使用 :invalid 伪选择器来指示哪个是哪个。控制台日志将查询所有无效的输入并记录它们。

更大的问题可能是需要通过的验证可能就像需要“@”符号一样简单 - 因此这不是一个非常严格的验证。

var test = document.querySelectorAll('input:invalid');
console.log(test);

input:invalid{background: red}

<input type="email" value="blah.com"/>
<input type="email" value="blah@blah.com"/>