Question

我正在为我的HTML表单创建一个简单的JS验证。验证检查字段是否为空，在某些情况下检查两者是否为空且输入！数字。这个检查效果很好，但我想要实现的是如果JS检测到无效输入，则以红色突出显示该字段。如果输入无效，我已经编写了一些JS来设置输入字段的样式，但它是不起作用的突出显示。

JS snap

function FormValidation(){
//First Name Validation 
    var fn=document.getElementById('firstname').value;
    if(fn == ""){
        alert('Please Enter First Name');
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
    if (/^[0-9]+$/.test(document.getElementById("firstname").value)) {
        alert("First Name Contains Numbers!");
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
    if(fn.length <=2){
        alert('Your Name is To Short');
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }

HTML snap

<form action="" method="post" onsubmit="return FormValidation();" onchange="return FormValidation();">        
    <div class="input-wrapper">
        <input type="text" placeholder="First Name" id="firstname" name="name"/>
    </div>
</form>

我很确定这个亮点应该有效。我之前做过类似的验证，但不幸的是，这次我无法得到我想要的结果。

Answer 1

if（$（＆＃39;＃TextBoxID＆＃39;）。val（）==＆＃39;＆＃39;）{ $（＆＃39;＃TextBoxID＆＃39;）。css（＆＃39; border-color＆＃39;，＆＃39; red＆＃39;）; } else { $（＆＃39;＃TextBoxID＆＃39;）。css（＆＃39; border-color＆＃39;，＆＃39;＆＃39;）; }

Answer 2

你最后错过了}，但除此之外，似乎工作得很好。

这是一个工作小提琴：http://jsfiddle.net/aJ2Tw/

修改后的代码：

 function FormValidation(){
    //First Name Validation 
    var fn=document.getElementById('firstname').value;
    if(fn == ""){
        alert('Please Enter First Name');
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
    if (/^[0-9]+$/.test(document.getElementById("firstname").value)) {
        alert("First Name Contains Numbers!");
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
    if(fn.length <=2){
        alert('Your Name is To Short');
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
}

Answer 3

这应该可以解决问题。您会希望在用户填写该输入后，边框颜色消失，因此使用 border-color 不是最好的方法。您可以使用代码段进行尝试。

document.getElementById('fieldtobered').classList.add("red");

document.getElementById('fieldtobegreen').classList.add("green");

.red {
    outline: 1px solid red;
}

.green {
    outline: 1px solid green;
}

<input type="text" id="fieldtobered" value="" />
<br>
<input type="text" id="fieldtobegreen" value="" />

JS验证突出显示输入字段红色/绿色

3 个答案: