输入：有效不适用于输入电子邮件答案

【问题标题】：input:valid not working for input email输入：有效不适用于输入电子邮件
【发布时间】：2020-06-17 04:56:53
【问题描述】：

我知道它看起来很假，但我不知道为什么 :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;
}

&lt;input type="email" class="form-control" id="inputEmail" placeholder="Email" value="j@gmail.com"&gt;

还有一件很奇怪的事情，它在代码 sn-p 上工作，但在 JSFIDDLE 上不工作，如果value="" 输入无效，我该怎么做？

谢谢，

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

好吧，如果它是有效的，我可以让它变成绿色，如果它是空的，就变成红色，如果它是错误的，变成橙色？我试过这个输入：有效{边框：1px纯绿色； } 输入：无效{ 边框：1px 纯红色； } 输入：需要{ 边框：1px 纯浅灰色； }

【解决方案2】：

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

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

谢谢。

【讨论】：

【解决方案3】：

您可以使用 'required' 使 null 值成为无效输入。

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

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

CSS

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

【讨论】：