jsf 自定义属性_如何在JSF中实现自定义密码强度指示器

jsf 自定义属性

使用JavaScript验证密码强度是一项常见任务。 在本文中，我将展示如何向基于JSF的Web应用程序添加密码强度指示器。 的
PrimeFaces中的密码组件已经具有密码强度的反馈指示符，但是它有两个主要缺点：

• 反馈指示器没有响应（固定宽度，不适合移动设备等）
• 密码强度验证的规则在JavaScript中进行了硬编码。 无法自定义。

我们需要的是一个外观漂亮，易于自定义且响应Swift的密码强度指示器/仪表。 幸运的是，PrimeFaces还有另一个组件–
进度栏 ，可以用于我们的目的。 这不是滥用。 最终结果实际上令人印象深刻。

让我们从XHTML开始。 首先，定义一个非常普通的密码字段。

<p:password id="passwort" value="#{mybean.password}" label="Password" required="true" autocomplete="off"/>

其次，定义一个带有displayOnly =” true”的进度条和一些提示密码的信息（弱，中，强）。

<div style="white-space:nowrap;">
    <h:outputText value="Password strength "/>
    <h:outputText id="pwdWeak" value="weak" style="display:none" styleClass="bold weakMsg"/>
    <h:outputText id="pwdMedium" value="medium" style="display:none" styleClass="bold mediumMsg"/>
    <h:outputText id="pwdStrong" value="strong" style="display:none" styleClass="bold strongMsg"/>
</div>
<p:progressBar id="pwdStrength" value="0" styleClass="pwdStrength" displayOnly="true"/>

让我们转到JavaScript部分。 我们需要一个脚本块（放置在p：progressBar之后的某个位置），在其中打算调用自定义JS函数setupPasswordStrength（）。

<script type="text/javascript">
    $(document).ready(function () {
        setupPasswordStrength("passwort", "pwdStrength");
    });
</script>

JS函数具有两个参数：密码字段的ID和进度栏的ID。 在该函数中，我们将为命名空间的keyup事件注册一个回调。 在回调中，我们将通过reg检查当前输入值。 表达式。 我们希望遵循以下规则（规则由您决定）：

• 密码长度少于8个字符或不包含至少一位数字==> 弱密码
• 密码长度等于或大于8个字符，包含至少一位数字，但没有至少一个小写和一个大写字母或一个特殊字符：==> 中级密码
• 密码长度等于或大于8个字符，包含至少一位数字，并且至少包含一个小写和一个大写字母或一个特殊字符：==> 强密码

这些是我经常在互联网上看到的好规则。 让我展示一下JS函数。

function setupPasswordStrength(pwdid, pbarid) {
    // reg. exp. for a weak password
    var weak = XRegExp("^(?=.*\\d{1,}).{8,}$");
    // reg. exp. for a strong password
    var strong = XRegExp("^(?=.*[a-z])(?=.*[A-Z]).+|(?=.*[!,%,&,@,#,$,^,*,?,_,~,\\-]).+$");

    var $this = $("#" + pwdid);
    var pbar = $("#" + pbarid).find(".ui-progressbar-value");

    // visualize on keyup
    $this.off('keyup.' + pwdid).on('keyup.' + pwdid, function(e) {
        visualizePasswordStrength($(this).val(), pbar, weak, strong);
    });

    // fix chrome issue with autofill fields
    setTimeout(function(){$this.triggerHandler('keyup.' + pwdid);}, 150);
}

function visualizePasswordStrength(pwd, pbar, weak, strong) {
    var pparent = pbar.parent().parent().parent();
    var weakMsg = pparent.find(".weakMsg");
    var mediumMsg = pparent.find(".mediumMsg");
    var strongMsg = pparent.find(".strongMsg");

    if (pwd == null || pwd.length < 1) {
        pbar.removeClass("weak medium strong");
        weakMsg.hide();
        mediumMsg.hide();
        strongMsg.hide();
        return;
    }

    if (!weak.test(pwd)) {
        // weak
        pbar.removeClass("medium strong").addClass("weak");
        mediumMsg.hide();
        strongMsg.hide();
        weakMsg.show();
        return;
    }

    if (!strong.test(pwd)) {
        // medium
        pbar.removeClass("weak strong").addClass("medium");
        weakMsg.hide();
        strongMsg.hide();
        mediumMsg.show();
        return;
    }

    // strong
    pbar.removeClass("weak medium").addClass("strong");
    weakMsg.hide();
    mediumMsg.hide();
    strongMsg.show();
}

在函数visualizePasswordStrength（）中，我们根据密码强度（在用户键入密码时）将样式类删除并添加到进度条。 他们是：

.weak {
    background-color: #F88E7D !important;
    border: 1px solid #F95D24 !important;
    width: 33.33% !important;
}

.medium {
    background-color: #FEE379 !important;
    border: 1px solid #EDB605 !important;
    width: 66.66% !important;
}

.strong {
    background-color: #81FF6C !important;
    border: 1px solid #05E428 !important;
    width: 101% !important;
}

弱指标保留进度条长度的三分之一。 中，强指标分别保留三分之二和所有可用空间。 进度栏的样式如下所示：

.pwdStaerke.ui-progressbar {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin-top: 8px;
    height: 18px !important;
    border: solid 1px #c2c2c2 !important;
}

.pwdStaerke.ui-progressbar .ui-progressbar-value {
    display: block !important;
    margin-left: -2px !important;
    -moz-border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    border-radius: 6px !important;
}

翻译自: https://www.javacodegeeks.com/2014/07/how-to-implement-a-custom-password-strength-indicator-in-jsf.html

jsf 自定义属性