简单表单验证所需的 Javascript 帮助答案

【问题标题】：Javascript help needed for simple form validation简单表单验证所需的 Javascript 帮助
【发布时间】：2025-11-27 00:15:02
【问题描述】：

我目前正在尝试使用 JS 创建一个非常简单的验证脚本。基本上，如果输入到表单中的文本短于 5 个字符或长于 25 个字符，我希望出现警报。

     <!doctype html>
     <html>
       <head>
       <title>Password Validator</title>
       </head>

      <body>
        <script>
        function validate()
        {  
        var yourpw = document.forms.passwordform.yourpassword.length; 

        if (yourpw < 5);
        {
        alert("password is too short");   
        return false;
        }

        if (yourpw > 25)
        {
        alert("your password is too long")
        return false;
        }
        }
        </script>


        <h1>Password Validator</h1>
        <p>Please create a new password below</p>
        <p>Be sure you password follows these guidelines</p>
        <ul>
          <li>No shorter than 5 characters</li>
          <li>No longer than 25 characters</li>
        </ul>

         <br>

         <form name="passwordform" method="post" onsubmit="validate();">
         <input type="text" name="yourpassword">
         <br>
         <input type="submit">
         </form>    

       </body>
    </html>

我不确定我到底错过了什么或为什么它不起作用，但我想要的目标是，当文本输入到名为“yourpassword”的文本框中时，将运行一个脚本，如果其中一个将显示一条消息满足以下条件之一：少于 5 个字符或超过 25 个字符，警告输入密码的人不符合准则，如果密码符合准则，那么我只想显示一条简单的确认消息。无论如何，我感谢任何帮助，因为这让我很沮丧，让我想放弃学习 JS。谢谢

【问题讨论】：

document.forms.passwordform.yourpassword 是输入字段，而不是字符串。它没有length 属性。在.length 之前需要.value。

标签： javascript html forms validation passwords

【解决方案1】：

您需要首先阻止表单提交的默认行为。

使用

 function validate(e)
     {  
        e.preventDefault();
        var yourpw = document.forms.passwordform.yourpassword.value.length; 
       ... rest of code
}

【讨论】：

【解决方案2】：

尝试将您的验证功能更新为如下：

  function validate(e) {
    e.preventDefault();
    var yourpw = document.getElementsByName('yourpassword')[0].value.length;

    if (yourpw < 5) {
        alert("password is too short");
        return false;
    }

    if (yourpw > 25) {
        alert("your password is too long")
        return false;
    }
}

您需要获取输入字段的值，如前所述，输入字段没有长度（@Xufox）以及防止表单提交的默认行为。

编辑：

完整的工作示例：

<!doctype html>
<html>

<head>
    <title>Password Validator</title>
</head>

<body>
    <script>
    function validate(e) {
        e.preventDefault();
        var yourpw = document.getElementsByName('yourpassword')[0].value.length;

        if (yourpw < 5); {
            alert("password is too short");
            return false;
        }

        if (yourpw > 25) {
            alert("your password is too long")
            return false;
        }
    }
    </script>
    <h1>Password Validator</h1>
    <p>Please create a new password below</p>
    <p>Be sure you password follows these guidelines</p>
    <ul>
        <li>No shorter than 5 characters</li>
        <li>No longer than 25 characters</li>
    </ul>
    <br>
    <form name="passwordform" method="post" onsubmit="validate(event);">
        <input type="text" name="yourpassword">
        <br>
        <input type="submit">
    </form>
</body>

</html>

【讨论】：

感谢您的快速回答。关于“event.preventDefault();”的一个问题我到底应该把它放在我的脚本中的什么地方？
@colby42536 更新了我的答案。 Ramanlfc 演示了插入代码的正确位置。
刚刚试了一下，还是不显示任何消息。也许html表单有问题？我没有其他想法，但使用 event.preventDefault();插入我仍然没有收到警报。
@colby42536 您是否不小心禁用了浏览器中的警报？尝试在验证功能中使用console.log('Test: ' + yourPw);。监控浏览器控制台中的输出（在 Google Chrome 中检查元素 > 控制台）。
在日志 "TypeError: e is undefined" 中收到此消息。我也复制了您在上面发布的确切代码。

【解决方案3】：

使用这个：但是将id name yourpassword 输入字段.. 这样你就可以轻松取值

     var yourpw =       document.getElementById("yourpassword").value;
      var len = yourpw.length;
       If ( len < 5 )
        {
       alert ("this is short");
        }
       elseif(len>25)
        {
        alert(" too long")
       } 
      else

        {
         //// your code 


            }

【讨论】：

【解决方案4】：

您可以通过 RegExp 轻松验证表单。
使用此功能验证 5 个字符的限制。

var pw = document.getElementById("yourpassword").value;
function isValidatePW(PW){
var pwRegExp - /\d{5}/
return pwRegExp.test(PW);
}

【讨论】：