当插入的电子邮件地址与我所说的模式不匹配时，我想改变这个电子邮件表单元素的外观，但我不确定该使用什么，我尝试使用:invalid，但我不确定它是否有效，所以我想听听你们的意见。
代码是:
<input type="email" name="email" required placeholder="Your Email" pattern="[a-zA-Z1-9]+@[a-zA-Z1-9]+.[a-zA-Z]{2,}"/>
[type="email"]{
padding:.7rem;
border-radius:.3rem;
border:none;
margin-right:2rem;
&:invalid{
outline:none;
border:1px solid red;
}
}
除了pattern，一切都很好，工作。你可以在这里测试:
[type="email"] {
padding: .7rem;
border-radius: .3rem;
border: 1px solid gray;
margin-right: 2rem;
}
[type="email"]:invalid {
border: 1px solid red;
}<label>Your Email
<input type="email" name="email" required placeholder="you@example.com" />
</label>空输入不显示错误
在用户输入任何数据之前，用一堆错误向用户打招呼并不是一个好的做法。
Bootstrap在<form>上使用.was-validated类来隐藏错误状态，直到该类通过JavaScript添加。
.was-validated input:invalid
另一个没有CSS的解决方案可能是使用:placeholder-shown伪类来隐藏错误状态。
这需要一个占位符属性，可以设置为placeholder=""。
input:invalid:not(:placeholder-shown) {
border-color: red;
}
/* or, backwards-compatible */
input:invalid {
border-color: red;
}
input:placeholder-shown {
border-color: initial;
}<label>Your Email
<input type="email" name="email" required placeholder="you@example.com" />
</label>注意限制性模式/regex
您不应该再为验证提供另一个模式。浏览器已经有了一个基于大量研究和许多工程师帮助的模式。
参见如何在JavaScript中验证电子邮件地址?对于你所缺少的一些想法。
我认为指出这一点很重要，因为限制输入数据实际上是在歧视那些在设计中遗漏了数据模式的用户。对于那些在工程人员中代表性不足的群体来说尤其如此。
你应该加上" input"在[type="email"]后输入[type="email"]示例，我试了一下，一切正常
input[type="email"]:invalid {
border: 1px solid red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="email" name="email" required placeholder="Your Email" pattern="[a-zA-Z1-9]+@[a-zA-Z1-9]+.[a-zA-Z]{2,}"/>
</body>
</html>你可以这样做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:valid {
background-color: palegreen;
}
input:invalid {
background-color: lightpink;
}
input {
display: block;
}
</style>
</head>
<body>
<label for="emailA">With no character:</label>
<input type="email" name="emailA" pattern="[a-zA-Z1-9]+@[a-zA-Z1-9]+.[a-zA-Z]{2,}" required />
<label for="emailB">With good email:</label>
<input type="email" name="emailB" pattern="[a-zA-Z1-9]+@[a-zA-Z1-9]+.[a-zA-Z]{2,}" value="mail@example.com" required />
<label for="emailC">With bad email:</label>
<input type="email" name="emailC" pattern="[a-zA-Z1-9]+@[a-zA-Z1-9]+.[a-zA-Z]{2,}" value="badmail@@example.com" required />
</body>
</html>