如果“确认密码”字段文本与“密码”文本相同,如何显示“有效”图标?类似于示例中的姓名和电子邮件字段。 以下是用于电子邮件验证和名称的 CSS 代码:
input[type=text]:required:valid,[type=email]:required:valid,textarea:required:valid{
background:url(valid.png) 90% center no-repeat #FFF ;
}
最佳答案
CSS不是一种编程语言。
您必须使用 Javascript 在服务器端甚至客户端验证您的字段。
通过现代浏览器中当前的 HTML5 实现,您可以检查输入的值。但据我所知,仅使用纯 css 无法检查相同的值。
<input type="password" id="pass" name="pass" required pattern="[A-Z]{3}[0-9]{4}"
title="Password numbers consist of 3 uppercase letters followed by 4 digits."/>
看看The constraint validation api
以下示例说明了如何使用上述 API 检查电子邮件的相似性。
<label>Email:</label>
<input type="email" id="email_addr" name="email_addr">
<label>Repeat Email Address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">
<script>
function check(input) {
if (input.value != document.getElementById('email_addr').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
关于html - 我们如何验证密码为 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12131788/