Question

我一直在使用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>

Answer 1

提交表单时，您不会致电isValid()。
您正在转换输入值toUpperCase()，并检查它是否与lowercase密码"seahorse"匹配。

检查我根据您的代码制作的代码片段，它运行正常且花哨。

我在您的onclick按钮上添加了submit调用，以便它调用您的isValid()函数。

另外，值得一提的是，您正在向parameter函数传递isValid()，但是您不需要这样做，因为您正在获取密码element及其密码{{ 1}}直接在函数内部。

值得一提的另一件事是，您value是该函数的returning，但实际上并不需要，因为您没有在脚本中执行条件，也没有在{ {1}}或boolean，代码将停止。

window.location

alert()

Answer 2

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

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

第二次从函数定义function isValid(password){ ... }中删除参数，因为您正在用dom节点（var password = document.getElementById("password");）覆盖它

第三次可以更改

if (password.value.toUpperCAse().match(pass)){

对此

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

Answer 3

两个原因： 1.您不会在任何地方调用isValid函数。2.您没有要添加到函数中的参数password。试试看：

<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>

为什么此表格和验证无效

3 个答案: