Javascript 为什么此表单和此验证不起作用

我一直在练习使用Bootstrap、HTML、CSS和JavaScript进行基本编程，目前我正在制作一个网站，它从一个登录页面开始，请求输入密码，然后将您发送到另一个页面

问题是表单和JavaScript验证不在一起工作，我不知道为什么我做错了，也不知道我做错了什么，所以如果有人能帮助我，那就太棒了！谢谢

<div class="jumbotron">
  <form name="PasswordField" action="">
    <div class="form-group">
      <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
      <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
    <button type="submit" onclick="isValid()" class="btn btn-default">Submit</button>
  </form>
</div>

<script type="text/javascript">
  function isValid(password)
  {
    var pass ="seahorse";
    var password = document.getElementById("password");

    if (password.value.toUpperCAse().match(pass))
    {
      window.location.href = "HappyChristmas.html";

      return true;
    }
    else
    {
      alert('Nope, try again');

      return false;
    }
  }
</script>

---

首先将事件添加到表单以调用javascript函数

<form name="PasswordField" action="/where/to/go" onsubmit="return isValid()">

对此

if (password.value.toUpperCase() == pass.toUpperCase()){

原因有二： 1.您没有从任何位置和2调用isValid函数。您没有要添加到函数中的参数密码。尝试一下：

<div class="jumbotron">
        <form name="PasswordField" action="">
          <div class="form-group">
            <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
            <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
          <-- Add an ID to the button -->
          <button type="submit" id="submitBtn" class="btn btn-default">Submit</button>
        </form>

提交表单时，您没有调用isValid。 您正在将输入值转换为大写，并检查它是否与小写密码seahorse匹配。 检查我根据你的代码制作的代码片段，它运行得很好

我在submit按钮上添加了onclick call，以便它调用isValid函数

另外值得一提的是，您正在向isValid函数传递一个参数，但您不需要这样做，因为您直接在函数中检索password元素及其值

另一件值得一提的事情是，您正在为函数返回一个布尔值，但实际上不需要返回，因为您没有在脚本中执行条件，并且在window.location或alert上更改位置时，代码将停止

函数是有效的 { var pass=海马； var password=document.getElementByIdpassword； 如果password.value.matchpass { window.location.href=HappyChristmas.html； } 其他的 { 提醒“不，再试一次”； } } 如果你是章鱼，我是。。。 提交

---

isValid在哪里？我知道你只是在练习，但我想你意识到这实际上并没有提供任何实际的安全性？用户可以直接访问HappyChristmas.html，而无需进入登录页。他们可以在一瞬间禁用或更改所有这些JavaScript，即使他们来到登录页。或者只是从页面源读取密码。如果你想练习做一些有意义的身份验证，你还需要学习一种服务器端语言。好吧，我刚刚开始，我做这个只是为了能够练习一些非常基本的编程，但是我会记住你的建议，我把它放在我的学习列表中。谢谢很小，但是isValidpassword…在您的示例中，这里不需要密码参数，因为您稍后直接从字段中获取它，并且无论如何，您没有在onlick中向它传递值。是的，我意识到了这一点。虽然我正在编辑我的答案，而你却对此发表了评论。谢谢你。

<div class="jumbotron">
        <form name="PasswordField" action="">
          <div class="form-group">
            <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
            <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
          <-- Add an ID to the button -->
          <button type="submit" id="submitBtn" class="btn btn-default">Submit</button>
        </form>

<script type="text/javascript"
            const pass ="seahorse"
            const password = document.getElementById("password");

            const submitBtn = document.getElementById("submitBtn");
            submitBtn.addEventListener("click", e=>{
              e.preventDefault();
              isValid();
            })

            function isValid() {
                if (password.value.toLowercase().match(pass)){
                    window.location.href = "HappyChristmas.html";
                    return true;
                    }
                else{
                    alert('Nope, try again')
                    return false;
                    }
            }
</script>