input:valid 不适用于输入电子邮件

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 上没有工作，我如何让 if value="" 成为无效输入？

谢谢，

Answer 1

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

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

以上声明将验证您的电子邮件 first.If 验证成功然后将提交表单，否则 not.So 您不需要为此付出额外的努力。

Answer 2

您可以使用'required'使空值无效输入。

编辑了代码以包含无效的选择器。

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

CSS

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

Answer 3

在您的 HTML input element 中包含 required 关键字，如果您不包含它，它将始终有效。

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

谢谢。

input:valid not working for input email