的JavaScript：輸入

Question

這裏的校驗值大約是我的代碼的一些信息：

HTML：

<input autocomplete="off" class="red" id="name" name="name" onclick="checkName(this);" onkeyup="checkName(this);" onblur="checkName(this);" placeholder="Name*"> 
<button type="submit" onClick="validateName();">SUBMIT YER WORK!</button> 

CSS：

input.red:focus { 
    background: #E45F56 !important; 
    border: 1px solid #E45F56 !important; 
} 
input.false { 
    background: #E45F56 !important; 
    border: 1px solid #E45F56 !important; 
} 
input.true { 
    background: #4aaaa5 !important; 
    border: 1px solid #4aaaa5 !important; 
} 

JAVASCRIPT：

var status = 0; 
var name = document.getElementById("name").value; 

function checkName(name) { 
    if (!name) { 
     status = 0; 
     name.classList.remove("red"); 
     name.classList.remove("true"); 
     name.classList.add("false"); 
    } else if (name) { 
     status = 1; 
     name.classList.remove("red"); 
     name.classList.remove("false"); 
     name.classList.add("true"); 
    } 
} 

function validateName() { 
    if (status == 0) { 
     window.location = "#fail"; 
     name.focus(); 
    } else if (status == 1) { 
     window.location = "#submitted"; 
    } 
} 

全想法是，如果你輸入t帽子輸入字段，你會得到一個直接的反饋，導致場變成紅色或綠色。如果您單擊該按鈕，將會打開一個彈出窗口。

此代碼的唯一問題是，每次點擊輸入字段時它都會變成綠色而不是紅色。這意味着另外，如果我點擊那個按鈕，「#submitted」 - popup會彈出，即使我沒有輸入任何內容。

Answer 1

name是對象的引用，所以!name將始終爲false。你可能想

if (!name.value) { 

或可能

if (!name.value.trim()) { 

...如果你想忽略前後空白。

Answer 2

我喜歡用jquery。語法更簡單。 您可以使用模糊太：

var name = $("#name").val(); 
name.blur(checkname); 

然後使用功能：

function checkname(name){ 

    if(name.length < 4){ //if you type less than 4 chars 
     name.css('border-color','#red'); 
     return false; 
    } 
    else if(name == ""){ //if the input is empty 
     name.css('border-color','#red'); 
     return false; 
    }else{ 
     name.css('border-color','#green'); 
     return true; //validate the fields 
    } 

} 

我希望它能幫助！