javascript表单验证不工作,即使一切看起来都很好(JS在浏览器中没有禁用)


javascript form validation doesn't work even though everything seems okay (JS is not disabled in browser)

我有这样一个表单:

<form action="../scrapll_m_nonstatic/process/reg/signup_process.php" method="post" name="signUp" onsubmit="return signUpVal()">
            <div id="fieldHolder">
                <input type="text" id="accountFieldFirstName" class="accountField" name="firstName" placeholder="First Name" />
                <input type="text" id="accountFieldLastName" class="accountField" name="lastName" placeholder="Last Name" />
                <input type="text" id="accountFieldUsername" class="accountField" name="username" placeholder="Username" />
                <input type="text" id="accountFieldEmail" class="accountField" name="email" placeholder="Email Address" />
                <input type="password" id="accountFieldPassword" class="accountField" name="password" placeholder="Password" />
            </div>
            <div id="subFooter">
                <a data-ftrans="slide reverse" href="index.php" id="signUpButton">Sign In</a>
                <a data-ftrans="slide" href="forgot.php" id="forgotButton">Forgot password</a>
            </div>
            <div id="footer">
                <input type="submit" id="signIn" value="Sign Up" />
        </form>

我有这个JS表单验证脚本来检查表单是否为空:

function signUpVal()
{
    var firstName = document.forms["signUp"]["firstName"].value;
    var lastName = document.forms["signUp"]["lastName"].value;
    var userName = document.forms["signUp"]["userName"].value;
    var email = document.forms["signUp"]["email"].value;
    var password = document.forms["signUp"]["password"].value;
    if (firstName == null || lastName == "" || lastName == null || lastName == "" ||    userName == null || userName == "" || email == null || email == "" || password == null || password = "")
    {
        alert("Please fill out the form completely");
        return false;
    }
}

它不做任何事情,直接进入动作PHP脚本。我怎样才能解决这个问题呢?

你有两个错误

1)。输入的用户名在JS代码中不匹配。修改为:

<input type="text" name="userName" id="accountFieldUsername" class="accountField" placeholder="Username" />

代替name="username"

2)。像这样检查你的值:

if (firstName == "" || lastName == "" || userName == "" || email == "" || password == "") {
    alert("Please fill out the form completely");
    return false;
}

你也不需要== null检查,因为表单元素的值不能为空,它是空字符串,如果留空。

演示:http://jsfiddle.net/tn4A6/

我想这可能是你的问题。

您使用的是赋值运算符=,而不是比较运算符==

你的if条件应该是:

 if (firstName == null || lastName == "" || lastName == null || lastName == "" ||    userName == null || userName == "" || email == null || email == "" || password == null || password == "")
    {
        alert("Please fill out the form completely");
        return false;
    }

if (firstName == null ..)中最后一个"="(而不是"==")etc)语句被IE视为语法错误,因此整个脚本无法编译。

Firefox也说了同样的话,但令人惊讶的是,它们都没有用弹出框突出显示它。只有当你点击F12调试器时才可见。

这意味着函数signUpVal()没有编译,所以对于页面来说它不存在——所以表单只是提交。

dfsq的答案提供了剩余的