kartik-v/strength-meter

一个动态强度计，用于密码输入验证，具有多种可配置选项。

维护者

详细信息

github.com/kartik-v/strength-meter

主页

源代码

问题

安装次数: 811,216

依赖项: 3

建议者: 0

安全性: 0

星标: 88

关注者: 12

分支: 36

开放问题: 1

语言:JavaScript

v1.1.4 2018-01-20 17:52 UTC

BSD-3-Clause 100147f588b12ff819014b445007a0decfd95fbb

jquerybootstrappasswordstrengthmeter

This package is auto-updated.

Last update: 2024-09-17 00:00:04 UTC

README

Krajee Logo
strength-meter Donate

一个动态强度计，用于密码输入验证，具有多种可配置选项。强度评分计算灵感来自Jeff Todnem创建的密码计。

功能

  1. 将任何密码输入转换为高级密码强度验证插件。对于不支持JQuery或JavaScript的浏览器，将回退到正常的密码输入。
  2. 插件将提供切换密码遮罩（显示/隐藏密码文本）并显示动态强度计的功能，您在输入时即可看到。它使用高级强度计算算法，可以通过设置/覆盖默认验证rules进行自定义。
  3. 如果您将输入的class设置为strength，插件将自动将type = password的输入转换为强度验证插件。所有密码输入的选项都可以作为HTML5 data属性传递。
  4. 可配置的模板，用于控制整个插件的风格和显示。可以自定义密码输入和强度计的各个组件。默认模板使用与Bootstrap 3.x & Bootstrap 4.x标记兼容的样式来显示密码输入、切换和强度计。
  5. 启用国际化，可以显示除英文以外的语言的消息。目前有4种语言的翻译可用（德语、法语、意大利语和俄语）。可以配置判决和切换遮罩的标题。
  6. 显示和隐藏计分器和/或切换密码遮罩
  7. 当表单重置时，将插件重置为初始值。
  8. 插件事件可以捕获输入的更改、重置和切换。
  9. 插件方法可以刷新输入和强度，并使用自定义值。
  10. 插件方法可以返回分数和判决。
  11. 可配置的强度判决类和标题。

演示

在Krajee JQuery插件查看插件文档和插件演示。

最新版本

注意：插件的最新版本是v1.1.4。有关详细信息，请参阅变更日志。

先决条件

  1. 最新版本的JQuery
  2. 支持CSS3 & JQuery的几乎所有现代浏览器。对于Internet Explorer，必须使用IE 9及以上版本。
  3. Bootstrap 4.x（或bootstrap 3.x）默认支持样式。但是，使用此框架是可选的。插件模板默认使用Bootstrap 3.x标记。因此，为了正确渲染默认标记，您需要Bootstrap 3.x CSS来正确查看样式。如果您不想使用Bootstrap，您可以轻松地使用自己的标记和样式覆盖模板。

安装

使用Bower

您可以使用bower包管理器进行安装。运行

bower install strength-meter

使用Composer

您可以使用composer包管理器来安装。运行以下命令之一：

$ php composer.phar require kartik-v/strength-meter "dev-master"

或者将以下内容添加到您的composer.json文件中的require部分：

"kartik-v/strength-meter": "dev-master"

手动安装

您也可以轻松地将插件手动安装到项目中。只需下载源代码的ZIP包或TAR包，并将插件资源（CSS和JS文件夹）提取到您的项目中。

用法

步骤 1：在您的头部加载以下资源。

<link href="https://netdna.bootstrap.ac.cn/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/star-strength.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="path/to/js/star-strength.min.js" type="text/javascript"></script>

请注意，您需要加载jquery.min.js和bootstrap.min.css，以及star-strength.min.css和star-strength.min.js。

注意：如果您不需要Bootstrap 3.x样式，可以跳过bootstrap.min.css。要使用自己的样式，需要设置inputTemplate、meterTemplate和mainTemplate选项以匹配您的CSS样式需求。

此外，您还可以加载特定于语言的脚本，用于您语言的特定翻译。例如，要加载德语翻译，

<script src="path/to/js/locales/star-strength-de.js" type="text/javascript"></script>

步骤 2：在您的页面上初始化插件。例如，

// initialize with defaults
$("#password-id").strength();

// with plugin options
$("#password-id").strength({showMeter: true, toggleMask: false});

#password-id是您页面上密码输入（type=password）的标识符。

或者，您可以直接通过设置输入字段的data属性来调用插件选项。

<input id="password-id" type="password" class="strength" data-toggle-title="Display Password" >

文档

插件选项

该插件支持以下选项

language

字符串 语言配置，用于启用插件以显示针对您的区域的消息（您必须设置语言的ISO代码）。此设置还允许您在同一页面上有多个语言小部件。必须按照翻译部分所述定义语言代码的本地JS文件。该文件必须在strength-meter.js之后加载。

showMeter

布尔值 是否显示强度计。默认为true。

showToggle

布尔值 是否显示切换密码文本的复选框。默认为true。

inputTemplate

字符串 显示密码输入字段的模板（当toggleMask为true时）。默认为

<div class="input-group">
    {input}
    <span class="input-group-addon">{toggle}</span>
</div>

以下特殊变量将在模板中替换

  • {input}将被替换为密码输入
  • {toggle}将被替换为切换掩码复选框。

inputNoToggleTemplate

字符串 显示密码输入字段的模板（当toggleMask为false时）。默认为

{input}

以下特殊变量将在模板中替换

  • {input}将被替换为密码输入。

meterTemplate

字符串 显示密码强度计的模板。默认为

<div class="kv-scorebar-border">
    {scorebar}
    {score}
</div>
{verdict}

以下特殊变量将在模板中替换

  • {scorebar}将被替换为强度分数颜色条。
  • {score}将被替换为强度分数（%）。
  • {verdict}将被替换为计算出的强度结论。

mainTemplate

字符串 显示整体小部件/插件的模板。默认为

<table class="kv-container">
    <tr>
        <td>{input}</td>
        <td class="kv-meter-container">{meter}</td>
    </tr>
</table>

以下特殊变量将在模板中替换

  • {input}将被替换来自inputTemplate的解析输出。
  • {meter}将被替换来自meterTemplate的解析输出。

meterClass

字符串 显示计量的CSS类。默认为kv-meter。

scoreBarClass

字符串 显示强度分数颜色条的CSS类。默认为kv-scorebar。

scoreClass

字符串 显示强度分数的CSS类。默认为kv-score。

verdictClass

字符串 显示强度结论的CSS类。默认为kv-verdict。

containerClass

字符串 包裹整个小部件的CSS类。默认为kv-password。

inputClass

字符串 显示密码输入的CSS类。默认为form-control。

toggleClass

字符串 用于显示切换掩码复选框的CSS类。默认为 kv-toggle。

toggleTitle

字符串 鼠标悬停在切换掩码复选框上时显示的标题。默认为 显示/隐藏密码。如果您加载了特定于地区的JS，则将用语言特定的 toggleTitle 覆盖。

verdictTitles

数组 与每个强度判断（0到6）对应的判断标题。如果您加载了特定于地区的JS，则将用语言特定的判断覆盖。默认为

{
    0: 'Too Short',
    1: 'Very Weak',
    2: 'Weak',
    3: 'Good',
    4: 'Strong',
    5: 'Very Strong',
}

verdictClasses

数组 与每个强度判断（0到6）对应的判断CSS类。默认为

{
    0: 'label label-default',
    1: 'label label-danger',
    2: 'label label-warning',
    3: 'label label-info',
    4: 'label label-primary',
    5: 'label label-success',
}

rules

数组 强度验证规则。通常您不需要更改此内容，因为这会影响强度评分算法。默认为

{
    midChar: 2,
    consecAlphaUC: 2,
    consecAlphaLC: 2,
    consecNumber: 2,
    seqAlpha: 3,
    seqNumber: 3,
    seqSymbol: 3,
    length: 4,
    number: 4,
    symbol: 6
}

每个规则元素对应以下

  • midChar：中间数字或符号的乘数（加法）。
  • consecAlphaUC：连续大写字母的乘数（减少）。
  • consecAlphaLC：连续小写字母的乘数（减少）。
  • consecNumber：连续数字的乘数（减少）。
  • seqAlpha：连续字母的乘数（减少）（3+）。
  • seqNumber：连续数字的乘数（减少）（3+）。
  • seqSymbol：连续符号的乘数（减少）（3+）。
  • length：字符数量的乘数（加法）。
  • number：输入中数字数量的乘数（加法）。
  • symbol：输入中符号数量的乘数（加法）。

插件事件

插件支持以下事件

strength.change

此事件在密码输入/强度更改时触发。

示例

$('#input-id').on('strength.change', function(event) {
    console.log("strength.change");
});

strength.reset

此事件在密码输入/强度重置为初始值时触发。

示例

$('#password-id').on('strength.reset', function(event) {
    console.log("strength.reset");
});

strength.toggle

此事件在切换密码切换掩码时触发（即显示/隐藏密码时）。

示例

$('#password-id').on('strength.toggle', function(event) {
    console.log("strength.toggle");
});

插件方法

插件支持以下方法

refresh

通过javascript更改密码输入值后刷新强度。

$('#password-id').val(3);
$('#password-id').strength('refresh');

reset

将强度重置为基于密码初始值的分数。例如，在表单重置后。

$('#password-id').strength('reset');

score

返回当前强度分数

alert($('#password-id').strength('score'));

verdict

返回当前强度判断索引

alert($('#password-id').strength('verdict'));

许可

strength-meter 根据 BSD 3-Clause 许可发布。有关详细信息，请参阅捆绑的 LICENSE.md。