使用javascript/HTML登录提示

我有这个登录提示，允许用户输入一个有效的电子邮件地址，然后输入至少由一个数字、一个特殊字符和至少8个或更多字符组成的密码。然后用户将再次输入密码，代码将确保密码匹配。它还实现了一个强度计来告诉用户密码的强度

我有基于输入字符的计量器执行强度，但我不知道如何执行密码的长度。现在，如果用户输入字母、数字和特殊字符，则表示该字符为强字符。但我需要它也至少有8个字符

这是我认为需要调整的具体功能

// Function for password strength meter
  function PasswordMeter(password) {
      if (password.length === 0) {
          document.getElementById("msg").innerHTML = "";
          return;
       }
       var matchedCase = new Array();
       matchedCase.push("[$@$!%*#?&]"); // Special Charector
       matchedCase.push("[0-9]");      // Numbers
       matchedCase.push("[a-z]");     // Lowercase Alphabates

       var ctr = 0;
       for (var i = 0; i < matchedCase.length; i++) {
            if (new RegExp(matchedCase[i]).test(password)) {
                ctr++;
            }
       }

       var color = "";
       var strength = "";
       switch (ctr) {
            case 0:
            case 1:
                 strength = "Weak: Keep going...";
                 color = "red";
                 break;
            case 2:
                 strength = "Medium: A little better but add more..";
                 color = "blue";
                 break;
            case 3:
                 strength = "Strong! Now that is good!";
                 color = "green";
                 break;
       }
       document.getElementById("msg").innerHTML = strength;
       document.getElementById("msg").style.color = color;
 }

//密码强度计功能
函数密码表（密码）{
如果（password.length==0）{
document.getElementById（“msg”）.innerHTML=“”；
返回；
}
var matchedCase=新数组（）；
matchedCase.push（“[$@$！%*#？&]”；//特殊字符
matchedCase.push（“[0-9]”；//数字
matchedCase.push（“[a-z]”；//小写字母
var-ctr=0；
对于（变量i=0；i

为了更好的透视图，这是我代码的其余部分。。。我非常接近完美，只需要在这一部分上有一点指导，所以提前感谢您的任何建议/帮助

登录
用户标识：




密码：




密码：
//用于检查电子邮件是否有效的函数。
函数validateEmail（userId）{
变量re=/\S+@\S+/；
返回重新测试（电子邮件）；
}
userId.onchange=validateEmail；
userId.onkeyup=validateEmail；
//用于检查两个密码是否相同的函数。
var password=document.getElementById（“psw1”），psw2=document.getElementById（“psw2”）；
函数validatePassword（）{
如果（psw1.value！=psw2.value）{
psw2.setCustomValidity（“密码不匹配”）；
}否则{
psw2.setCustomValidity（“”）；
}
}
psw1.onchange=验证密码；
psw2.onkeyup=验证密码；
//密码强度计的功能
函数密码表（密码）{
如果（password.length==0）{
document.getElementById（“msg”）.innerHTML=“”；
返回；
}
var matchedCase=新数组（）；
matchedCase.push（“[$@$！%*#？&]”；//特殊字符
matchedCase.push（“[0-9]”；//数字
matchedCase.push（“[a-z]”；//小写字母
var-ctr=0；
对于（变量i=0；i

因此您的正则表达式已经在检查密码长度是否至少为8个字符。如果此长度小于8个字符，则只需显示一条消息。我用新消息覆盖了'strength'变量，但您也可以显示新消息

登录
用户标识：




密码：




密码：
//用于检查电子邮件是否有效的函数。
函数validateEmail（userId）{
变量re=/\S+@\S+/；
返回重新测试（电子邮件）；
}
userId.onchange=validateEmail；
userId.onkeyup=validateEmail；
//用于检查两个密码是否相同的函数。
var password=document.getElementById（“psw1”），psw2=document.getElementById（“psw2”）；
函数validatePassword（）{
如果（psw1.value！=psw2.value）{
psw2.setCustomValidity（“密码不匹配”）；
}否则{
psw2.setCustomValidity（“”）；
}
}
psw1.onchange=验证密码；
psw2.onkeyup=验证密码；
//密码强度计的功能
函数密码表（密码）{
//这是我唯一修改的部分
如果（password.length==0）{
document.getElementById（“msg”）.innerHTML=“”；
返回；
}else if（password.length<8）{
document.getElementById（“msg”）.style.color='red'；
document.getElementById（“msg”）.innerHTML=“您的密码长度必须至少为8个字符”；
返回；
}
var matchedCase=新数组（）；
matchedCase.push（“[$@$！%*#？&]”；//特殊字符
matchedCase.push（“[0-9]”；//数字
matchedCase.push（“[a-z]”；//小写字母
var-ctr=0；
对于（变量i=0；ivar isEightCharactersLong = '(?=.{8,})';
var hasNumbers = '(?=.*[0-9])';
var hasLowerCase = '(?=.*[a-z])';
var hasUpperCase = '(?=.*[A-Z])';
// we're escaping the regex reserved characters using '\'
var hasSpecialCharacters = '(?=.*[!@#\$%\^&])'; 

// For ES6 with template strings
// 8 characters long AND has numbers AND (has lowercase OR has uppercase)
const weakPasswordRegex = new RegExp(
  `^${isEightCharactersLong}${hasNumbers}(${hasLowerCase}|${hasUpperCase})$`);

// For lower ES versions
var weakPasswordRegex = new RegExp(
   '^' + isEightCharactersLong + hasNumbers + '(' + hasLowerCase + '|' + hasUpperCase + ')$' 

function measurePasswordStrength(password) {
  var weakPassword = new RegExp('<placeholder>');
  var mediumPassword = new RegExp('<placeholder>');
  var strongPassword = new RegExp('<placeholder>');
  if (strongPassword.test(password)) return 3;
  if (mediumPassword.test(password)) return 2;
  if (weakPassword.test(password)) return 1;
  return 0;
}

function PasswordMeter(password) {
  if (password.length === 0) {
    document.getElementById("msg").innerHTML = "";
    return;
  }

  var color = "";
  var strength = "";
  switch (measurePasswordStrength(password)) {
    case 0:
    case 1:
      strength = "Weak: Keep going...";
      color = "red";
      break;
    case 2:
      strength = "Medium: A little better but add more..";
      color = "blue";
      break;
    case 3:
      strength = "Strong! Now that is good!";
      color = "green"; 
      break;
  }

  document.getElementById("msg").innerHTML = strength;
  document.getElementById("msg").style.color = color;
}