Question

我有一些div，每当输入有效时，它应该为div添加绿色勾号，如下所示：

function ValidateEmail() {
    var regex = /(([a-zA-Z0-9._%+-]+@([a-zA-Z0-9-]+\.?){1,3})(\.[a-zA-Z]{2,6}){1,3})/
    var email = document.getElementById("reg_email").value;
    if (email.indexOf("..") == -1 && email.match(regex)) {
        reg_email_v.classList.add('validated');
        return true;
    }
    reg_email_v.classList.remove('validated');
    reg_email_v.innerHTML = "";
    return false;
}

.input-validation 
{
    display: inline-block;
    color:Green;
    content:"";
}
.input-validation.validated
{
    content: "123";
    color: Green;
}

<input type="text" id="reg_email" runat="server" maxlength="100" onkeyup="ValidateEmail();" />
<div class="input-validation" id="reg_email_v"></div>

当我将validated添加到div的类时，它会在浏览器中自动更新，但实际div中没有任何内容显示。div并且input位于表格中的一个td内。

Answer 1

content只能用于:after和:before伪类。所以

.input-validation.validated:before
{
    content: "123";
    color: Green;
}

应该有效

将类添加到div后不更新

1 个答案: