2

如果“确认密码”字段文本与“密码”文本相同，如何显示“有效”图标？类似于示例中的名称和电子邮件字段。这是电子邮件验证和名称的css代码：

input[type=text]:required:valid,[type=email]:required:valid,textarea:required:valid{
background:url(valid.png) 90% center no-repeat #FFF ; 
}

示例：http: //data.imagup.com/10/1160658139.JPG

4

1 回答 1

2

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

这是一个示例，说明如何使用上述 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>
于 2012-08-27T09:17:53.327 回答