在 HTML 中使用 Javascript 检查密码

Question

这是 'Signup' html 页面的一些代码；我无法让它检查两个密码是否匹配。如果他们不匹配，我需要一个弹出框来显示 "try again";如果他们做数学，页面可以正常继续（sumbit 按钮转到我网站的主页）。

谢谢！！！我在底部附近写了一个 javascript 函数....

        <form class="form-horizontal" role="form" method="post" action="index.php">
          <div class="form-group">
              <label for="name" class="col-sm-2 control-label">Name</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
              </div>
          </div>
          <div class="form-group">
              <label for="email" class="col-sm-2 control-label">Email</label>
              <div class="col-sm-10">
                  <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
              </div>
          </div>
          <div class="form-group">
              <label for="password" class="col-sm-2 control-label">Create a password</label>
              <div class="col-sm-10">
                  <input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
              </div>
          </div>
          <div class="form-group">
              <label for="password" class="col-sm-2 control-label">Confirm password</label>
              <div class="col-sm-10">
                  <input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
              </div>
          </div>
          <div class="form-group">
              <div class="col-sm-10 col-sm-offset-2">
                  <input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" onclick="checkPassword()">
              </div>
          </div>
          <div class="form-group">
              <div class="col-sm-10 col-sm-offset-2">
                  <! Will be used to display an alert to the user>
                  <script>
                  function checkPassword{
                    var1 = document.getElementById("password1");
                    var2 = document.getElementById("password2");
                    var n = var1.localeCompare(var2)
                    if(n == 0){
                      return true;
                      alert("Passwords do not match, please try again!");
                    }
                    return false;

                    }

                   </script>
              </div>
          </div>
      </form>

Answer 1

从提交标签中删除 onclick="checkPassword()"

并在表单标签中添加

onsubmit="return checkPassword()"

Answer 2

var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;

另外 n===0 意味着，它在 return 语句之后匹配和警告将不起作用。

Answer 3

您比较的是元素，而不是值。从元素中获取值：

var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;

Return false 如果要停止提交，在调用return之前显示消息。 localeCompare 方法 returns 如果字符串不同则为非零值：

if(n != 0){
  alert("Passwords do not match, please try again!");
  return false;
}
return true;

不要在按钮上使用 click 事件，而是在表单上使用 submit 事件：

<form class="form-horizontal" role="form" method="post" action="index.php" onsubmit="return checkPassword();">

Answer 4

首先用 return 和警报切换行。

var pw1 = document.getElementById("password1").value;
var pw2 = document.getElementById("password2").value;

if( pw1 !== pw2 )
{
   alert("Passwords do not match, please try again!");
   return true;
}

我从输入元素中取出值并将它们与 !== 进行比较。也就是说，两个变量的类型必须相等，文本也必须不相等。

Answer 5

稍微更改了您的代码：

<form class="form-horizontal" role="form" method="post" onsubmit="return checkPassword();" action="index.php">
      <div class="form-group">
          <label for="name" class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
          </div>
      </div>
      <div class="form-group">
          <label for="email" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
              <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
          </div>
      </div>
      <div class="form-group">
          <label for="password" class="col-sm-2 control-label">Create a password</label>
          <div class="col-sm-10">
              <input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
          </div>
      </div>
      <div class="form-group">
          <label for="password" class="col-sm-2 control-label">Confirm password</label>
          <div class="col-sm-10">
              <input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
              <input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" >
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
          </div>
      </div>
  </form>

  <script>
              function checkPassword(){
                var1 = document.getElementById("password1");
                var2 = document.getElementById("password2");
                if(var1.value != var2.value){
                    alert("Passwords do not match, please try again!");
                    return false;   
                    }
                    else{
                        return true;
                    }
                }
               </script>

请注意您的表单标签有 onsubmit 事件，它会调用您的 javascript 函数（不是提交按钮），如果密码不匹配，您可以通过这种方式停止提交表单。同样在您的 javascript 函数中，请注意我在返回 false 和修改代码以比较元素值而不是元素之前如何显示警报。此代码已经过测试并有效。

在 HTML 中使用 Javascript 检查密码

Checking passwords using Javascript in HTML

html

javascript

passwords

function

button