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>

Soo ..现在当我失去第一个输入（名字）的焦点时。它用红色复选标记填充所有框，因为它们都是空的。无论如何，我可以让这个事件只发生一次失去焦点的那一行，其余的没有绿色复选标记或红色，直到它被试图填补？

Answer 1

您需要使用event.target属性（请参阅MDN的this页面）。此值包含发生事件的DOM对象。您的新验证器看起来像这样：

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

这样，只有事件所针对的DOM对象才会对其进行验证。

一次使用javascript onblur事件一行

1 个答案: