Gmail 风格的密码强度计

• 下载源代码 - 8.22 KB

引言

这是一个使用 CSS 和 JavaScript 实现的 Gmail 风格的简单密码强度指示器。

背景

在开发脚本之前的基本思路是允许用户评估其在注册时输入的密码强度。

关于代码

压缩文件包含一个 *.html 文件，其中包含 JavaScript 和 CSS 代码。只需下载并运行即可。

以下是确定密码强度的 JavaScript 代码。

第一个 'if' 检查密码长度是否大于 4，如果是，则将 1 分值增加 1。这些分值将决定以图形方式显示密码强度的 CSS 类。

第二个 'if' 检查密码是否包含小写和大写字母。

第三个 'if' 检查密码是否至少包含 1 个数字。

第四个 'if' 检查密码是否至少包含 1 个特殊字符。

第五个 'if' 检查密码长度是否大于 12。

    var points = 0; //---- password strength points.

    //---- if password length is greater than 4, give 1 point.
    if (password.length > 4) points++;

    //---- if password has both lowercase and uppercase characters, give 1 point.    
    if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) points++;

    //---- if password has at least one number, give 1 point.
    if (password.match(/\d+/)) points++;

    //---- if password has at least one special character, give 1 point.
    if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )    points++;

    //---- if password length is greater than 12,  give 1 point.
    if (password.length > 12) points++;

代码工作原理

每次用户在文本框中输入一个字符时，都会执行一个 onblur 函数，并将密码文本框的值发送到 JavaScript 函数，该函数评估密码并为其赋予分值。

一个 password_strength div 将根据 points 变量的变化显示颜色。

一个 password_description div 将使用描述 (desc) 数组和 points 值显示密码的文本描述。

强密码指南

选择良好密码的常见指南旨在使密码不易被智能猜测发现：

1. 在密码中包含数字、符号、大写和小写字母。
2. 密码长度应在 12 到 14 个字符左右。
3. 避免使用基于重复、字典单词、字母或数字序列、用户名或姓名或日期等个人信息的密码。

历史

• 2008 年 8 月 7 日：初始发布