javascript - JS 验证高亮输入字段红色/绿色

Question

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

JS 快照

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 快照

<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

你在最后缺少一个 }，但除此之外，它似乎工作得很好。

这是一个工作 fiddle :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";
    }
}