html - input[type=email] :invalid does not work. 表示有效的电子邮件无效

Question

我正在尝试验证表单中的电子邮件。我的html代码如下:

<div class="email-entry desktop-container">
<div id="a"></div>
<form name="form1" action="#">
  <input id="test" type="email" name="text1" placeholder="Email Address" required>
  <input type="image"  src="images/icon-arrow.svg" alt="submit">
  <p id="addedText"></p>
</form>

我拥有的被触发的 CSS 代码如下:

input[type=email]:invalid {
    border: 1px solid red;
    background-image: url("/images/icon-error.svg");
    background-repeat: no-repeat;
    background-position: 75% 25%;
  }

发生的事情是，当我刷新页面时，错误图标出现了，但事实并非如此。以下是输入表单的 CSS:

input[type=email] {
    margin-left: 60px;
    border-radius: 35px;
    background-color: transparent;
    width: 550px;
    height: 30px;
    border: 2px solid hsl(0, 36%, 70%);
    color:hsl(0, 36%, 70%);
    padding: 15px 15px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 50px 35px;
    cursor: pointer;
 }

我想像上面那样进行验证。使用 JavaScript 和操作 Dom 会更好吗？如有任何帮助，我们将不胜感激。

Answer 1

因为你的输入有 required 属性，输入为空时无效。所以刷新之后就变空了，也就失效了。

Example JSFiddle .