用户注册密码强度校验问题求助（含HTML/JS待修复代码）

我正在开发用户注册功能，需要增强密码强度，要求密码包含大小写字母及数字。目前已编写相关HTML表单及JS验证代码，但代码无法正常运行，想请教是否遗漏内容、代码存在哪些问题，该如何修改？

一、HTML代码存在的问题 #

• 用户名输入框class拼写错误：for m-control 应为 form-control
• 密码输入框type属性错误：passwrd 应为 password（浏览器无法识别错误类型，会默认转为明文输入）
• 密码输入框绑定了未定义的validate()函数，且与jQuery的keyup事件冲突，需移除onkeyup="return validate()"
• 密码标签的for属性值为pass1，与输入框idpassword不匹配，需统一为password
• 用户名pattern正则表达式冗余：(?=.*[a-z]).{10, }.+ 存在多余空格，若要求用户名至少10位字母数字，可改为^[a-zA-Z0-9]{10,}$

二、JS代码存在的问题 #

• jQuery选择器错误：通过id选择元素时漏加#前缀（比如$("maxChar")应为$("#maxChar")，$(".lowercase")应为$("#lowercase"，HTML中是id而非class）
• 密码长度判断逻辑错误：password.length == 8 要求刚好8位，不符合“至少8位”需求，应改为password.length >= 8
• 冗余且错误的符号验证代码：需求未要求密码包含符号，且/^[a-zA-Z0-9]=$/正则无效、存在语法错误（else前多了闭合大括号），需删除该段
• 代码末尾存在无效的</script>-->垃圾代码，需移除
• 变量声明缺少分号：var password = $(this).val() 末尾应加分号，符合编码规范
• 正则实例化冗余：可直接使用字面量正则，无需new RegExp

三、修改后的完整代码 #

HTML代码 #

<div class="form-group row">
  <label class="col-12 col-sm-3 col-form-label text-sm-right">Username</label>
  <div class="col-12 col-sm-8 col-lg-6">
    <input data-parsley-type="alphanum" type="text" name="username" pattern="^[a-zA-Z0-9]{10,}$" required="" placeholder="" class="form-control">
  </div>
</div>
<div class="form-group row">
  <label class="col-12 col-sm-3 col-form-label text-sm-right" for="password">Password</label>
  <div class="col-12 col-sm-8 col-lg-6">
    <input data-parsley-type="alphanum" type="password" id="password" name="password" required="" placeholder="" class="form-control">
    <ul>
        <li id="uppercase">At least 1 Uppercase Character</li>
        <li id="lowercase">At least 1 Lowercase Character</li>
        <li id="num">At least 1 Number</li>
        <li id="maxChar">At least 8 characters long</li>
    </ul>
  </div>
</div>

JS代码 #

$(document).ready(function(){
    const lowercase = /[a-z]/;
    const uppercase = /[A-Z]/;
    const number = /[0-9]/;
    
    $("#password").keyup(function(){
        const password = $(this).val();
        
        // 验证密码长度至少8位
        if(password.length >= 8){
            $("#maxChar").css("color", "green");
        }else{
            $("#maxChar").css("color", "red");
        }
        
        // 验证是否包含小写字母
        if(lowercase.test(password)){
            $("#lowercase").css("color", "green");
        }else{
            $("#lowercase").css("color", "red");
        }
        
        // 验证是否包含大写字母
        if(uppercase.test(password)){
            $("#uppercase").css("color", "green");
        }else{
            $("#uppercase").css("color", "red");
        }
        
        // 验证是否包含数字
        if(number.test(password)){
            $("#num").css("color", "green");
        }else{
            $("#num").css("color", "red");
        }
    });
});

内容的提问来源于stack exchange，提问作者yumie