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，这一点很重要。您会看到关于未定义对象 mypassword 的错误，这可能会将您指向代码中的错误行。

Answer 2

如果没有html5标签，使用一个通用的className，那就是

<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 class="inputElement" type="text" name="username" id="username" ></td>
</tr>
<tr>
<td>Password*</td>
<td>:</td>
<td><input class="inputElement" type="text" name="password" id="password" pattern=".{5,}" title="Minimum length of 5 letters or numbers."  ></td>
</tr>
<tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input class="inputElement" type="text" name="email" id="email" ></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>


<script type="text/javascript">

function ValidateLoginForm()
{
    var inputElements = document.getElementsByClassName('inputElement');;
    for(var i=0;i<inputElements.length;i++){
        if(!inputElements[i].value){
            alert(inputElements[i].name +' cannot be empty');
            return false;
        }
    }
    return true;
}
</script>