javascript - 密码验证协助

Question

我正在尝试在 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(); 

任何帮助将不胜感激..

Answer 1

您有两个问题:

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 所做的那样，用于显示错误。