javascript 表单验证 if 语句

Question

我正在构建注册表单，我发现 Safari 浏览器无法使用 HTML5“必需”标签。所以我构建了这个 Javascript 脚本来确保用户必须提交数据，否则表单将不会提交。

但是，如果您输入用户名和密码，但没有电子邮件地址，表单仍会提交。 (如果您遗漏用户名和/或密码，则表单不会提交)。

所以问题似乎出在脚本的电子邮件地址部分。如果电子邮件字段为空，我不希望提交表单。

这是我的代码:

<script>
function ValidateLoginForm()
{
    var username = document.form1.username;
    var password = document.form1.password;
    var email = document.form1.email;



      if (username.value == "")
    {
        alert("Your username wasn't recognised.");
        username.focus();
        return false;
    }

      if (password.value == "")
    {
        alert("Please enter a password.");
        password.focus();
        return false;
    }
      if (email.value == "")
    {
        alert("Please enter your email address.");
        mypassword.focus();
        return false;
    }
    else{
    return true;
    }
}
</script>

这是我的表格(在表格内)

<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="login/process.php" onsubmit="return ValidateLoginForm();">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><center><strong>Registration Form</strong></center></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="username" type="text" id="username" required></td>
</tr>
<tr>
<td>Password*</td>
<td>:</td>
<td><input name="password" type="text" id="password" pattern=".{5,}" title="Minimum length of 5 letters or numbers."  required></td>
</tr>
<tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input name="email" type="text" id="email" required></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="submit" value="Submit Registration Form"></td>
<p>*Password must consist of numbers and letters.. 5 Characters minimum.</p>
</tr>
</table>
</td>
</form>
</tr>
</table>

谢谢

Answer 1

看起来您正在关注一个不存在的项目 mypassword，这会导致您的脚本错误终止并且表单正常提交。

if (email.value == "")
{
    alert("Please enter your email address.");
    // Focus the email rather than mypassword (which doesn't exist)
    email.focus();
    return false;
}
// All's well if you got this far, return true
return true;

Here is the working code

始终在浏览器的错误控制台打开的情况下开发 JavaScript 非常重要。您会看到有关 undefined object mypassword 的错误，这可能会指向代码中的错误行。