如何使用 JavaScript 验证表单密码是否匹配？答案

【问题标题】：How can I verify form passwords match using JavaScript?如何使用 JavaScript 验证表单密码是否匹配？
【发布时间】：2020-01-28 17:47:11
【问题描述】：

我有一个带有密码和验证密码字段的基本 html 表单。如果密码匹配，我只想允许用户继续。如果密码不匹配，我希望向用户发出通知。

我认为我目前拥有的东西很接近，但 JS 似乎仍然没有做任何事情。

HTML

<form class="ajax-form" id="pwreset" method="post" onsubmit="return verifyPassword()" action="/set-password">
        <div id="userinput">
      <label for="username">Username</label>
            <input type="text" id="username" name="username"/><br/>
            <label for="new_password">Password</label>
            <input type="Password" id="new_password" name="new_password"/><br/>
            <label for="verifyPassword">Verify Password</label>
            <input type="password" id="verifyPassword" name="verifyPassword"/><br/>
            <input type="hidden" id="uuid" name="uuid" value="{{uuid}}"/>
      <p><input class="button" type="submit" value="SUBMIT"></p>
        </div>
</form>

function verifyPassword() {
  let pass1 = document.getElementById("new_password").value;
  let pass2 = document.getElementById("verifyPassword").value;
    let match = true;
  if (pass1 != pass2) {
    //alert("Passwords Do not match");
    document.getElementById("new_password").style.borderColor = "#ff0000";
    document.getElementById("verifyPassword").style.borderColor = "#ff0000";
    match = false;
  }
  else {
    alert("Passwords match.");
  }
  return match;
}

【问题讨论】：

如果我可以下载您的页面，那么浏览器的“查看源代码”功能 [CTRL]+[U] 将在您的 JS 代码中显示您的明文密码。再想想。
Can you require two form fields to match with HTML5?的可能重复
@Dougie：在“验证密码”字段中输入值的用户也在“密码”字段中输入了值。他们已经知道它是什么。

标签： javascript html forms passwords

【解决方案1】：

将 javascript 调用放入 HTML 中可能会出现一些问题。

在您的情况下，该函数可能是在 HTML 之后定义的，因此该元素无权访问它。

您可以改用这个：

function verifyPassword() {
  let pass1 = document.getElementById("new_password").value;
  let pass2 = document.getElementById("verifyPassword").value;
  let match = true;
  if (pass1 != pass2) {
    //alert("Passwords Do not match");
    document.getElementById("new_password").style.borderColor = "#ff0000";
    document.getElementById("verifyPassword").style.borderColor = "#ff0000";
    match = false;
  }
  else {
    alert("Passwords match.");
  }
  return match;
}

document.getElementById('pwreset').onsubmit = verifyPassword;

<form class="ajax-form" id="pwreset" method="post" action="/set-password">
  <div id="userinput">
    <label for="username">Username</label>
    <input type="text" id="username" name="username" /><br/>
    <label for="new_password">Password</label>
    <input type="Password" id="new_password" name="new_password" /><br/>
    <label for="verifyPassword">Verify Password</label>
    <input type="password" id="verifyPassword" name="verifyPassword" /><br/>
    <input type="hidden" id="uuid" name="uuid" value="{{uuid}}" />
    <p><input class="button" type="submit" value="SUBMIT"></p>
  </div>
</form>

【讨论】：

【解决方案2】：

这是一个例子。我创建了一个 passwordGroup 构造函数来集中信息。这样也更容易编写测试。

var form = document.forms[0];
var pass1 = form.querySelector('[data-password]');
var pass2 = form.querySelector('[data-password-confirmation]');
var submitButton = form.querySelector('button[type="submit"]');

// PasswordGroup constructor
var PasswordGroup = function () {
  this.password = '';
  this.passwordConfirmation = '';
};

// method to update the passwords values
PasswordGroup.prototype.setValues = function(data) {
  this.password = data.password;
  this.passwordConfirmation = data.passwordConfirmation;
};

// method to check the password's equality
PasswordGroup.prototype.match = function() {
  return !!(this.password 
  && this.passwordConfirmation 
  && this.password === this.passwordConfirmation);
};

/*
* Enable/disable the submit button if passwords do not match
*/
function validateSubmit() {
  if(passwordGroup.match()) {
    submitButton.removeAttribute('disabled');
  } else {
    submitButton.setAttribute('disabled', 'disabled');
  }
}

// passwordGroup instance
var passwordGroup = new PasswordGroup();

// objecto to store the current values
var passwordsValues = {
  password: '',
  passwordConfirmation: '',
};

// event triggered after enter a new value in the password's field
var onPasswordChange = function(e) {
  var target = e.target;
  var targetValue = target.value;
  
  if(target.dataset.hasOwnProperty('password')) {
    passwordsValues.password = targetValue;
  } else if (target.dataset.hasOwnProperty('passwordConfirmation')) {
    passwordsValues.passwordConfirmation = targetValue;
  }

  passwordGroup.setValues(passwordsValues);
  validateSubmit();
};

// event attribution
pass1.onkeyup = onPasswordChange;
pass2.onkeyup = onPasswordChange;

input {
  display: block;
}

<form action="" name='account'>
  <input type="text" placeholder="name" /> 
  <input type="password" data-password placeholder="password"/>
  <input type="password" data-password-confirmation placeholder="repeat password"/>
  <button type="submit" disabled="disabled">Enviar</button>
</form>

<p data-message></p>

【讨论】：