具有 8 个字符和 2 位数字的密码验证器不起作用

Question

嘿，我正在尝试让这个密码验证器使用 8 个字符和 2 个数字，但是..它没有。我看不出我的代码有什么问题。我的控制台没有说有错误

                    <div class="field with-indicator">
                        <label for="pass-one">Password:</label>
                        <input type="text" name="pass-one" id="pass-one" />
                        <span id="validity" class="indicator">Not Ok</span>
                    </div>

<script>
    let input = document.getElementById('pass-one');
let regex = new RegExp("^(?=(.*[a-zA-Z]){1,})(?=(.*[0-9]){2,}).{8}$");

if ( !regex.test(input)) 
{
document.getElementById("validity").innerHTML = "Not Ok";
//return false;           
  } 
else 
  {
   document.getElementById("validity").innerHTML = "Ok";
   }


</script>

Answer 1

尝试进行验证，例如每次输入更改后 oninput="validPass()"（我不会更改您的正则表达式，但会在下面的代码段中的 <input> 标记中添加包装器 validPass() 函数和事件 - 但如果您希望密码至少为 8 个字符或更长，则将正则表达式 .{8}$ 的最后一部分更改为 .{8,}$)

let input = document.getElementById('pass-one');
let regex = new RegExp("^(?=(.*[a-zA-Z]){1,})(?=(.*[0-9]){2,}).{8}$");

function validPass() {

  if ( !regex.test(input.value)) 
  {
  document.getElementById("validity").innerHTML = "Not Ok";      
  } 
  else 
  {
   document.getElementById("validity").innerHTML = "Ok";
   }
}

<div class="field with-indicator">
    <label for="pass-one">Password:</label>
    <input type="text" name="pass-one" id="pass-one" oninput="validPass()" />
    <span id="validity" class="indicator" >Not Ok</span>
</div>

Answer 2

为了使您的代码正常工作，您需要将其包装到事件处理程序中。例如，您可以使用 change event and the addEventListener() 来设置处理程序：

document.getElementById('pass-one').addEventListener('change', function(e) {
    let regex = new RegExp("^(?=(.*[a-zA-Z]){1,})(?=(.*[0-9]){2,}).{8}$");

    if ( !regex.test(this.value)) {
        document.getElementById("validity").innerHTML = "Not Ok";
        //return false;
    } else {
        document.getElementById("validity").innerHTML = "Ok";
    }
})

<div class="field with-indicator">
    <label for="pass-one">Password:</label>
    <input type="text" name="pass-one" id="pass-one" />
    <span id="validity" class="indicator">Not Ok</span>
</div>

具有 8 个字符和 2 位数字的密码验证器不起作用

Password validator with 8 characters and 2 digits don't work

javascript

passwords

validation

character

digits