Javascript 密码验证至少为 6 个字符

Password validation is at least 6 character

提问by inaz

I wrote some validation code for a password and confirm password that checks if they match or not. Furthermore there is a condition that checks if length of my password is less than 6 characters and writes/displays an error if they are less than 6 characters. But my code doesn't work correctly: when I switch to field 2 the condition of field 1 isn't checked and if both of conditions are correct the error still presents.

我为密码编写了一些验证代码并确认密码以检查它们是否匹配。此外，还有一个条件是检查我的密码长度是否小于 6 个字符，如果它们小于 6 个字符，则写入/显示错误。但是我的代码无法正常工作：当我切换到字段 2 时，不会检查字段 1 的条件，如果两个条件都正确，错误仍然存​​在。

Here is my code:

这是我的代码：

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
    else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
 
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }
    else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}  

         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

采纳答案by Tarlan Mammadzada

Use below code. Firstly, pass1.lengthis not correct. You should write pass1.value.length. Secondly, I added comparing the 2 blocks at the end, as firstly you should check the length of first block. Also, the function should be called on changes of first block also.

使用下面的代码。首先，pass1.length是不正确的。你应该写pass1.value.length. 其次，我在最后添加了比较 2 个块，因为首先您应该检查第一个块的长度。此外，还应在第一个块的更改时调用该函数。

Good luck!

祝你好运！

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
  
    if(pass1.value.length > 5)
    {
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }
    else
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
        return;
    }
  
    if(pass1.value == pass2.value)
    {
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
 else
    {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
}  

<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass(); return false;" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>
        

回答by Aleksandar Matic

Try this:

尝试这个：

if(pass1.value.length > 5)

回答by Vural

before:

前：

 if(pass1.length > 5)

after:

后：

 if(pass1.value.length > 5)

and you should check equality after everything fits, like length or allowed chars etc.

并且您应该在一切合适后检查相等性，例如长度或允许的字符等。

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

    if(pass1.value.length > 5 && pass2.value.length > 5)
    {
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"

        if(pass1.value == pass2.value)
        {
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "ok!"
        }
        else
        {
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = " These passwords don't match"
        }
    }
    else
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }

}

<input name="password" type="password" placeholder="password"  id="pass1"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>

回答by WSk

if (pass1.value.length > 5)

Make sure don't apply trim() because trim will remove blank spaces and blank space in the password is not a valid character.

确保不要应用trim()，因为trim 会删除空格并且密码中的空格不是有效字符。

回答by ?ukasz Trzewik

When you are checking the length of the pass1, you are not actually checking it's value - pass1.length > 5- you should change it to pass1.value.length > 5

当您检查 pass1 的长度时，实际上并没有检查它的值pass1.length > 5- 您应该将其更改为pass1.value.length > 5

回答by Nitin Kumar

To check length you should have to write like this

要检查长度，你应该这样写

if (pass1.value.length > 5)

and then your code working fine

然后你的代码工作正常

回答by CodeYogi

You can do:

你可以做：

if (pass1.value.trim().length > 5)

回答by Aman Jaiswal

You can take advantage of regular expression to do the validation for you. For example : I am allowing some special characters in this password and count is greater then 6

您可以利用正则表达式为您进行验证。例如：我允许在这个密码中使用一些特殊字符并且计数大于 6

regex = pass1.value.search(/^[a-zA-Z0-9+&@#/%?=~_|!:,.;]{6,}+$/);

if(regex){
    message.innerHTML="Invalid Password.";
}else{
    message.innerHTML = " you have to enter at least 6 digit!";
}

回答by Raghu Acharya

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
 else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
 
 if(pass1.value.length > 5){
  pass1.style.backgroundColor = goodColor;
  message.style.color = goodColor;
  message.innerHTML = "character number ok!"
  }
  else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
 
}  

<input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>

回答by Tomas Langkaas

The apparently simple task of password validation can get complex, and it may be difficult to pinpoint why code fails to work as intended. A major part of the challenge lies in specifying the conditional logic, then to convert this logic to working code.

密码验证这个看似简单的任务可能会变得复杂，并且可能很难查明代码无法按预期工作的原因。挑战的主要部分在于指定条件逻辑，然后将此逻辑转换为工作代码。

You want to achieve the following:

您希望实现以下目标：

1. Make the user enter a password of at least 6 characters length
2. Make the user confirm the password
3. Provide the user with relevant feedback assisting the user through the process

1. 使用户输入至少 6 个字符长度的密码
2. 让用户确认密码
3. 向用户提供相关反馈，帮助用户完成整个过程

One way to convert this to conditional logic (in pseudocode) is as follows:

将其转换为条件逻辑（伪代码）的一种方法如下：

if (password length is less than 6)
  inform user that password should be at least 6 characters
else if (passwords do not match)
  ask user to confirm password
else
  inform user that passwords match, all is ok

But my code doesn't work correctly: when I switch to field 2 the condition of field 1 isn't checked and if both of conditions are correct the error still presents.

但是我的代码无法正常工作：当我切换到字段 2 时，不会检查字段 1 的条件，如果两个条件都正确，错误仍然存​​在。

Your code follows a different logic (in pseudocode):

您的代码遵循不同的逻辑（伪代码）：

if (passwords match)
  inform user that passwords match, all is ok
else
  inform user that passwords do not match

if (password is more than 5 characters)
  inform user that the password is long enough
else
  inform user that the password should be at least 6 characters

One problem in your code is that password length is the last thing you check, so the first if/else check is redundant (it will never produce any relevant feedback, even when the passwords match), since your code always will end up with providing feedback about password length.

您的代码中的一个问题是密码长度是您检查的最后一件事，因此第一个 if/else 检查是多余的（即使密码匹配，它也永远不会产生任何相关反馈），因为您的代码最终总是会提供关于密码长度的反馈。

Another problem is that your code would accept passwords that match even if they are less than 6 characters, that is why you want to check password length first, and afterwards check whether both passwords match.

另一个问题是您的代码会接受匹配的密码，即使它们少于 6 个字符，这就是为什么您要先检查密码长度，然后再检查两个密码是否匹配。

In addition, your code only runs these checks when the user writes to field 2 ('#pass2'), you need to add an event handler to 'onkeyup' of field 1 as well.

此外，您的代码仅在用户写入字段 2 ('#pass2') 时运行这些检查，您还需要向字段 1 的 'onkeyup' 添加事件处理程序。

Thus, your code logic needs to be rewritten. Here is one of several ways this could be done:

因此，您的代码逻辑需要重写。这是可以做到的几种方法之一：

function checkPass() {
  var neutralColor = '#fff'; // 'white';
  var badColor     = '#f66'; // 'red';
  var goodColor    = '#6f6'; // 'green';
  
  var password1 = getElm('pass1').value;
  var password2 = getElm('pass2').value;

  //if password length is less than 6
  if (password1.length < 6) {
    feedback('Enter a password of at least 6 characters');
    //we do not care about pass2 when pass1 is too short
    setBGColor('pass2', neutralColor);
    //if pass1 is blank, set neutral background
    if (password1.length === 0) {
      setBGColor('pass1', neutralColor);
    } else {
      setBGColor('pass1', badColor);
    }
  //else if passwords do not match
  } else if (password2 !== password1) {
    //we now know that pass1 is long enough
    feedback('Confirm password');
    setBGColor('pass1', goodColor);
    //if pass2 is blank, set neutral background
    if (password2.length === 0) {
      setBGColor('pass2', neutralColor);
    } else {
      setBGColor('pass2', badColor);
    }
  //else all is well
  } else {
    feedback('Passwords match');
    setBGColor('pass1', goodColor);
    setBGColor('pass2', goodColor);
  }
}

//helper function for document.getElementById()
function getElm(id) {
  return document.getElementById(id);
}

//helper function for setting background color
function setBGColor(id, value) {
  getElm(id).style.backgroundColor = value;
}

//helper function for feedback message
function feedback(msg) {
  getElm('error-nwl').innerHTML = msg;
}

<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass()"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" />
<div id="error-nwl">Enter a password of at least 6 characters</div>