Question

StackExchange社区！我的HTML表单验证有问题。以下表格适用于注册页面，可在此处找到： http://cod5showtime.url.ph/register.html PHP部分工作正常，但验证失败，原因不明。

<form action="" method="post" name="reg" onSubmit="return validateForm()">
<div class="roundbox"><div class="grey">Register<br>Get a lot of advantages, only by making an account!<br><ul><li>Post Comments in Blog Posts;</li>
<li>Access the Members Area;</li>
<li>Enjoy Custom Titles and Other Features!</li></ul></div></div><br><br>     
            <label class="grey" for="username">Username:</label>        <br>
            <input class="field" type="text" name="username" id="username" value="" size="23" /><br><br>
            <label class="grey" for="email">Email:</label><br>
            <input class="field" type="text" name="email" id="email" size="23" /><br><br>
            <label class="grey" for="email">Password:</label><br>
            <input class="field" type="password" name="pass" id="pass" size="23" /><br><br>
            <input type="submit" name="submit" value="Create Account!" class="bt_register" /><br>
            <label class="grey">You will receive a e-mail with your password. Store it safely!</label>
            <div class="roundbox"><div class="grey" id="error"></div>
            <div class="grey" id="error2"></div>
            <div class="grey" id="error3"></div></div>
</form>

正如我所说，表格效果很好。我将在下面解释它是如何工作的，因为我很难理解我的代码[在我看来]。

id = "error" div is for username errors
id = "error2" div is for password errors
id = "error3" div is for email errors (not scripted in JS yet!)

这是我的JavaScript：

<script type="text/javascript">
function validateForm()
{
var user=document.forms["reg"]["username"].value;
var pass=document.forms["reg"]["pass"].value;
if (user.length < 4 || user.length > 32) 
  {
document.getElementById("error").innerHTML="Invalid username specified:<br>Choose a username of 3 to 32 characters!";
  return false;
  }
    if (user == NULL || user == '') 
  {
document.getElementById("error").innerHTML="No username specified!";
  return false;
  }
if (pass.length < 4 || pass.length > 32) 
  {
document.getElementById("error2").innerHTML="Invalid password specified:<br>For safety reasons passwords have to be 3 to 32 characters long!";
  return false;
  }
if (pass == NULL || pass == '') 
  {
document.getElementById("error2").innerHTML="No password specified!";
      return false;
  }
}
</script>

如果您非常友好地查看我提供给您的页面，您会看到用户名验证有效，但密码却没有。

Answer 1

一旦表单在尝试验证其他字段之前通过第一次验证，就会发布表单。

输入有效的用户名后，将发布表单并跳过电子邮件地址+密码验证。

尝试将所有内容放在同一个if语句中，以便在发布表单之前必须满足所有条件。

我建议安装一个调试工具，例如firebug，这有助于及时识别它。

您可能还想研究现有的正则表达式方法来验证电子邮件地址，因为我怀疑网上有一些好的方法。

JavaScript验证失败

1 个答案: