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

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

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

Answer 2

您有两个问题：

passwordValidity中的一些逻辑有点偏。
您没有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提供另一个提示字段，以显示错误。

Answer 3

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

您希望何时进行此比较？如果您在提交第一个字段后立即执行验证，则第二个字段肯定无法完成。我会根据需要设置两个字段，并对第二个字段的模糊执行验证。
修复功能条件：

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

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

从您的条件中返回true或false，因此提交事件监听器可以知道验证期间发生了什么。

密码验证协助

3 个答案: