密码验证协助

Password Validation Assistance

本文关键字：验证 密码      更新时间：2023-09-26

我正在尝试在JS中验证密码；密码应该不超过8个字符，它应该匹配，并且应该在用户点击表单提交之前通知他们错误。

注意：我的表单在检查控制台时返回null，可能是什么问题？我在页面上还有其他JS代码，而不仅仅是密码代码

我做了这个似乎不起作用：

var password1 = document.getElementById("pwd1");
var password2 = document.getElementById("pwd2");
var passwordValidity = function() {
if (password1.value.length >= 8 != password2.value.length >= 8) {
    password1.innerHTML="Oops! Passwords must be at least 8 characters!";
    password1.style.background="red";
  } else {
        pwd2Hint.innerHTML =" Your passwords don't match";  
    }
};  
password1.addEventListener("keyup", passwordValidity, false);
password2.addEventListener("keyup", passwordValidity, false);
var form = document.getElementById("hw4Form");
form.addEventListener("submit", function (event) {
        passwordValidity();
        event.preventDefault();

如有任何帮助，我们将不胜感激。。

您有两个问题：

  1. passwordValidity中的一些逻辑有点错误

  2. 您没有让passwordValidity告诉它的调用者发生了什么（例如，它需要返回一些东西）。

固定1:

这并不是代码所期望的：

if (password1.value.length >= 8 != password2.value.length >= 8) {

只有当其中一个密码字段的长度小于8，而另一个字段的长度大于或等于8时，才会出现这种情况。

你试图把两件不能结合的东西结合起来。相反：

if (password1.value.length < 8) {
    // ...show must be at least 8 error...
} else if (password1.value != password2.value) {
    // ...show "they don't match" error
} else {
    // All okay
}

修复2：只需让它返回一个标志（可能会更改其名称以明确它是这样做的）。结合以上：

var isPasswordValid = function() {
    var valid = false;
    if (password1.value.length < 8) {
        password1.innerHTML = "Oops! Passwords must be at least 8 characters!";
    } else if (password1.value != password2.value) {
        pwd2Hint.innerHTML =" Your passwords don't match";
    } else {
        // All okay
        pwd2Hint.innerHTML = "";
        valid = true;
    }
    return valid;
};

然后使用它：

form.addEventListener("submit", function (event) {
    if (!isPasswordValid()) {
        event.preventDefault(); 
    }
}, false);

旁注：当密码太短时，我不会替换password1的值。一方面，它通常是一个type="password"字段，显示字符的占位符，而不是可读的；另一方面，这是一件非常不寻常的事情，会让用户感到惊讶，因为他们通常认为你没有这样做。要么保留它，要么清除它，并使用另一个提示字段，就像对password2所做的那样，用于显示错误。

我会将passwordValidity函数更改为返回true或false，然后将提交更改为

form.addEventListener("submit", function (event) {
  event.preventDefault(); 
  return passwordValidity();

您的方法存在一些问题。这样想：

  • 您希望何时进行此比较？如果您在提交第一个字段后立即执行验证，那么第二个字段肯定不会完成。我会根据需要设置两个字段，并对第二个字段的模糊进行验证。

  • 修复函数的条件：

if (password1.value.length >= 8 != password2.value.length >= 8) {将!=更改为&&，您需要一个AND运算符，并确保两个条件都检查到相反的情况。还要考虑检查最小长度。

按照此函数的编写方式，if和else都被视为错误。为第二个错误输入else if，为成功案例输入else。

  • 从您的条件中返回true或false，这样提交事件监听器就可以知道验证期间发生了什么
相关文章：