使用 jQuery 的密码强度指示器

随着 Web 技术中新框架的出现，设计和实现功能丰富且响应迅速的网页变得非常容易。在这里，我们将使用 jQuery 和 Bootstrap 为注册页面设计一个密码强度指示器。

实现的功能：
每当用户将输入添加到密码输入表单时，用于表示密码强度的进度条。进度条的长度代表密码的强度。我们将仅在前端实现这一点。

有效密码具有以下评估标准：（以确定长度贡献的百分比）

至少一个大写字母 (10%)、小写字母 (10%)、数字 (10%)、特殊符号 (10%)
字长标准：
- 6 个字：20%
- 8 个字：40%
- [10, infinty) 字数：60%

先决条件：
HTML、CSS、JavaScript、jQuery 和 Bootstrap 的基本知识。此外，用户应该了解 Bootstrap 中的网格系统是如何工作的。

程序：

初始化布局：
首先，让我们使用引导程序初始化我们的注册页面的布局。对于进度条，我们将使用progress类从引导程序构建进度条（无论使用的引导程序的变体/版本如何）。




  

    
    
    
    
    


  

    

    

    
        
               
            
                
                    
                        
                          Enter Password:

输出：

更新进度条：
现在，我们需要确保每当密码输入字段更新时，进度条都会根据上面提到的指定要求更新。
要遵循的步骤：

在密码字段中，使用keyup()函数检查每当按下键时。
提取在密码字段中添加的输入。
根据密码长度更新百分比变量和进度条颜色。
检查字符集约束。

更新进度条的宽度。

最终解决方案：




  

    
    
    
    
    


  

    

    

    
        
               
            
                
                    
                        
                          Enter Password:

输出：