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

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

我认为我目前拥有的已经很接近了，但是JS仍然没有做任何事情

HTML

---

将javascript调用放入HTML中可能会产生一些问题

在您的例子中，函数可能是在HTML之后定义的，因此元素没有访问权

您可以改为使用此选项：

函数验证密码（）{
让pass1=document.getElementById（“新密码”）.value；
让pass2=document.getElementById（“verifyPassword”）.value；
让match=true；
if（pass1！=pass2）{
//警报（“密码不匹配”）；
document.getElementById（“新密码”）.style.borderColor=“#ff0000”；
document.getElementById（“verifyPassword”）.style.borderColor=“#ff0000”；
匹配=假；
}
否则{
警报（“密码匹配”）；
}
复赛；
}
document.getElementById（'pwreset'）.onsubmit=verifyPassword

用户名


密码


验证密码



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


var form=document.forms[0]；
var pass1=form.querySelector（“[data password]”）；
var pass2=form.querySelector（“[数据密码确认]”）；
var submitButton=form.querySelector（'button[type=“submit”]”）；
//密码组构造函数
var PasswordGroup=函数（）{
this.password=''；
this.passwordConfirmation=''；
};
//方法更新密码值
PasswordGroup.prototype.setValues=函数（数据）{
this.password=data.password；
this.passwordConfirmation=data.passwordConfirmation；
};
//方法检查密码的相等性
PasswordGroup.prototype.match=函数（）{
return！！（这是密码
&&这是密码确认
&&this.password===this.passwordConfirmation）；
};
/*
*如果密码不匹配，启用/禁用提交按钮
*/
函数validateSubmit（）{
if（passwordGroup.match（））{
submitButton.removeAttribute（“已禁用”）；
}否则{
setAttribute（'disabled'，'disabled'）；
}
}
//密码组实例
var passwordGroup=new passwordGroup（）；
//对象来存储当前值
变量密码值={
密码：“”，
密码确认：“”，
};
//在密码字段中输入新值后触发的事件
var onPasswordChange=函数（e）{
var目标=e.target；
var targetValue=target.value；
if（target.dataset.hasOwnProperty（'password'））{
passwordsValues.password=targetValue；
}else if（target.dataset.hasOwnProperty（'passwordConfirmation'））{
passwordsValues.passwordConfirmation=targetValue；
}
设置值（passwordsValues）；
validateSubmit（）；
};
//事件归因
pass1.onkeyup=onPasswordChange；
pass2.onkeyup=onPasswordChange
输入{
显示：块；
}

羡慕
如果我可以下载您的页面，那么浏览器的“查看源代码”功能[CTRL]+[U]将在JS代码中显示您的明文密码。再想一想，@Dougie的可能重复：用户在“验证密码”字段中输入值时，也在“密码”字段中输入值。他们已经知道这是什么了。
<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;
}