php - HTML 表单验证

Question

我创建了一个简单的 HTML 表单，它将输入作为客户的用户名。它验证它是否确实是一个有效的用户名。如果是，那么它应该转到 step2.php 页面，如果不是，那么它应该显示错误并停留在原始页面上。

这是我的 HTML 代码:

<form method="post" onsubmit="validateUsername();" id="myform" name="myform" action="step2.php">
      Choose username: <input type="text" id="username" name="username" />
      <input type="submit" value="Submit">
</form>

我正在使用 javascript 函数验证用户名:

function validateUsername()
{
    var x=document.forms["myform"]["username"].value.length;

    if (x < 5)
    {
        alert('Username too short.');
        return false;
    }
    else
    {
        return true;
    }
}

我的问题:

如果用户输入的用户名很短，那么它会显示一条警告消息“用户名太短”。当我在警告消息上按“确定”按钮时，它将转到 step2.php。理想情况下，它应该仅在正确验证用户名时才将数据发送到 step2.php。但这并没有发生。

有人能找到我代码中的错误吗？

Answer 1

改变:

<form method="post" onsubmit="validateUsername();" id="myform" name="myform" action="step2.php">
      Choose username: <input type="text" id="username" name="username" />
      <input type="submit" value="Submit">
</form>

收件人:

<form method="post" onsubmit="return validateUsername();" id="myform" name="myform" action="step2.php">
      Choose username: <input type="text" id="username" name="username" />
      <input type="submit" value="Submit">
</form>

请注意添加关键字 return，如果 validateUsername 返回 false，该关键字将取消提交表单。