0

嘿伙计们，我很好奇我是否能够改变我现在必须一次工作的表格。首先，这是我的桌子。

桌子：

<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..截至目前，当我失去第一个输入（名字）的焦点时。它用红色复选标记填充所有框，因为它们都是空的。无论如何，我是否可以让这个事件发生在一次失去焦点的那一行，而其余的没有绿色复选标记或红色，直到它被尝试填充？

4

1 回答 1

2

您将需要使用该event.target属性（请参阅MDN 的此页面）。此值包含发生事件的 DOM 对象。您的新验证器将如下所示：

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

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

于 2013-07-29T00:43:10.173 回答