Html 我们如何将密码验证为css
如果“comfirm password”字段文本与“password”文本相同,如何显示图标“valid”?与示例中的名称和电子邮件字段类似。 以下是用于电子邮件验证的css代码和名称:Html 我们如何将密码验证为css,html,validation,password-protection,Html,Validation,Password Protection,如果“comfirm password”字段文本与“password”文本相同,如何显示图标“valid”?与示例中的名称和电子邮件字段类似。 以下是用于电子邮件验证的css代码和名称: input[type=text]:required:valid,[type=email]:required:valid,textarea:required:valid{ background:url(valid.png) 90% center no-repeat #FFF ; } 例如: 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."/>
看看
下面是一个示例,说明如何使用上述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>
电子邮件:
重复电子邮件地址:
功能检查(输入){
if(input.value!=document.getElementById('email\u addr').value){
input.setCustomValidity('两个电子邮件地址必须匹配');
}否则{
//输入有效--重置错误消息
input.setCustomValidity(“”);
}
}
如果我理解正确,我认为您可能需要javascript来完成此任务。:valid
和:invalid
是html5表单中可以接受的伪选择器。它们附带的规定是,您在输入元素本身上使用内置的regex属性(这保证了只有完全支持此模块的html5浏览器才会支持此样式,但仍然如此)。