使用CSS进行密码验证

Question

对于某些学生，我在html和javascript中做了一些简单的密码验证技巧 现在，我想知道是否可以仅使用html和css（因此不使用javascript）进行密码验证？

我知道css不会用于表单验证，而只是用于修改某些道具（例如颜色），作为对验证过程的反应。但是html输入模式和类型属性是。 我不知道将最后两个句子放在何处-在这里，作为评论或答案，就在这里。干杯

Answer 1

您可以使用HTML5 pattern属性（see here for more information），该属性允许您将允许的模式定义为正则表达式。请记住，并非所有浏览器都支持此功能。

电子邮件的input元素可能看起来像这样：

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

然后，如果该字段的值无效，则可以使用CSS向用户提供反馈：

input:invalid {
    border-color: red;
}

input:valid {
    border-color: green;
}