两个输入字段都匹配时突出显示边框颜色

羽崎

我想在两个输入字段的边框值不相同时用红色突出显示，如果匹配则用绿色突出显示。我也想用Javascript而不是jQuery编写函数。

HTML：

<form class="form">
                <hr class="verticalline">
                <input class="newpd shine" value="New Password"
                            onblur="this.value'New Password':this.value;"
                            onfocus="this.select()"
                            onclick="if (this.value=='New Password'){this.value=''; this.type='password'}">
                <input class="repeatpd shine" value="Repeat Password"
                            onblur="this.value'Repeat Password':this.value;"
                            onfocus="this.select()"
                            onclick="if (this.value=='Repeat Password'){this.value=''; this.type='password'}">
                <input id="button" type="button" value="Submit" onclick="ausgabe();">

Javascript：

/*changedpd*/
function passtrue(){
    var newpd = document.getElementsByClassName('newpd').value;
    var repeatpd = document.getElementsByClassName('repeatpd').value;
    if(newpd === repeatpd){
        document.getElementsByClassName('shine').style.border ="2px solid green";
    }else{
        document.getElementsByClassName('shine').style.border ="2px solid red";
    } 
}
function ausgabe(){
    document.getElementById('button').innerHTML = passtrue();
}

gurvinder372

getElementsByClassName 返回元素列表，而不仅仅是一个。

做了

function passtrue(){
    var newpd = document.getElementsByClassName('newpd')[0].value;
    var repeatpd = document.getElementsByClassName('repeatpd')[0].value;
    if(newpd === repeatpd){
        document.getElementsByClassName('shine')[0].style.border ="2px solid green";
    }else{
        document.getElementsByClassName('shine')[0].style.border ="2px solid red";
    } 
}

或简单地使用querySelector（如果该类只有一个元素）

var getEl = selector => document.querySelector( selector );
function passtrue(){
    var newpd = getEl('.newpd').value;
    var repeatpd = getEl('.repeatpd').value;
    if(newpd === repeatpd){
        getEl('.shine').style.border ="2px solid green";
    }else{
        getEl('.shine').style.border ="2px solid red";
    } 
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。