使用javascript onblur事件一次一行

Question

嘿傢伙我很好奇，如果我能夠改變我現在有一次工作一行的形式。 首先，這是我有的表。

表：

<form name="form1" action="submit.php" method='POST'> 
    <table border="0" class="signUp"> 
    <tr><td align="center" class= "signUpfont"> Sign up for FREE </td></tr> 
    <tr><td><input type="text" text="First Name" class='signUpinput' id="fname" name="fname" placeholder="First Name" onblur="validate();" /></td> 
       <td><label id = "fnamelabel"></label></td> 
      </tr> 
    <tr><td><input type="text" class='signUpinput' id="lname" name="lname" placeholder="Last Name" onblur="validate();" /></td> 
       <td><label id = "lnamelabel"></label></td> 
      </tr> 
    <tr><td><input type="text" class='signUpinput' id="email" name="email" placeholder="Email" onblur="validate();" /></td> 
       <td><label id = "emaillabel"></label></td> 
      </tr> 
    <tr><td><input type="text" class='signUpinput' id="email2" name="email2" placeholder="Re-enter Email" onblur="validate();" /></td> 
       <td><label id = "email2label"></label></td> 
      </tr> 
    <tr><td><input type="password" class='signUpinput' id="pass" name="pass" placeholder="Password" onblur="validate();" /></td> 
       <td><label id = "passlabel"></label></td> 
      </tr> 
    <tr><td><input type="submit" name="submit" value="Sign Up" style="color:white; background-color:#2B4478; width: 100px;margin-left: 52px;"></td></tr> 

這是我的javascript：

function validate() 
{ 
var fname = document.getElementById("fname").value; 
var lname = document.getElementById("lname").value; 
var email = document.getElementById("email").value; 
var email2 = document.getElementById("email2").value; 
var pass = document.getElementById("pass").value; 

var fname_reg = /^\w*$/; 
var lname_reg = /^\w*$/; 
var email_reg = /\w+\@\w+\.\w{1,3}/; 
var pass_reg = /^\w*$/; 

if(!fname_reg.test(fname) || fname == "") 
{ 
document.getElementById("fnamelabel").innerHTML = '<img src="images/redcheckmark.png" height="25" width="25" />'; 
}else{ 
document.getElementById("fnamelabel").innerHTML = '<img src="images/checkmark.png" height="25" width="25" />'; 
} 

if(!lname_reg.test(lname) || lname == "") 
{ 
document.getElementById("lnamelabel").innerHTML = '<img src="images/redcheckmark.png" height="25" width="25" />'; 
}else{ 
document.getElementById("lnamelabel").innerHTML = '<img src="images/checkmark.png" height="25" width="25" />'; 
} 

if(!email_reg.test(email) || email == "") 
{ 
document.getElementById("emaillabel").innerHTML = '<img src="images/redcheckmark.png" height="25" width="25" />'; 
}else{ 
document.getElementById("emaillabel").innerHTML = '<img src="images/checkmark.png" height="25" width="25" />'; 
} 

if(!email_reg.test(email2) || email2 != email || email2 == "") 
{ 
document.getElementById("email2label").innerHTML = '<img src="images/redcheckmark.png" height="25" width="25" />'; 
}else{ 
document.getElementById("email2label").innerHTML = '<img src="images/checkmark.png" height="25" width="25" />'; 
} 

if(!pass_reg.test(pass) || pass == "") 
{ 
document.getElementById("passlabel").innerHTML = '<img src="images/redcheckmark.png" height="25" width="25" />'; 
}else{ 
document.getElementById("passlabel").innerHTML = '<img src="images/checkmark.png" height="25" width="25" />'; 
} 

} 

    </script> 

洙..截至目前，當我失去了第一個輸入（名字）的焦點。它用紅色的選中標記填滿所有的盒子，因爲它們都是空的。無論如何，我可以讓這個事件發生，只有一條線一次失去焦點，其餘的沒有綠色的勾號或紅色，直到它被試圖填充？

Answer 1

您需要使用event.target屬性（請參閱MDN中的this頁面）。該值包含事件發生的DOM對象。你的新驗證器看起來是這樣的：

function validate(event) { 
    if(!event.target) { 
     return; 
    } 
    switch(event.target.id) { 
      // perform individual checks 
    } 
} 

這樣，只有該事件目標的DOM對象纔會對其進行驗證。