html - 输入:有效不适用于输入电子邮件

Question

我知道它看起来很虚，但我不知道为什么 :valid 选择器不起作用

我有这段代码

HTML

<input type="email" class="form-control" id="inputEmail" placeholder="Email" value="j@gmail.com">

CSS

input:valid{
    border:1px solid green;
    background:red;
}

input:valid {
  border: 1px solid green;
  background: red;
}

<input type="email" class="form-control" id="inputEmail" placeholder="Email" value="j@gmail.com">

还有一个奇怪的事情，它在代码片段上工作，但在 JSFIDDLE 上不工作，如何使 value="" 为无效输入？

谢谢，

Answer 1

您可以使用以下语句来声明电子邮件字段。

<input type="email" placeholder="Enter your email " required>

以上语句会先验证你的邮箱，如果验证成功，则提交表单，否则不提交。所以你不需要为此付出额外的努力。