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

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

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

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

pwd_weak

pwd_medium

pwd_strong
让我们从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 passwordvar weak = XRegExp("^(?=.*\\d{1,}).{8,}$");// reg. exp. for a strong passwordvar 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 fieldssetTimeout(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)) {// weakpbar.removeClass("medium strong").addClass("weak");mediumMsg.hide();strongMsg.hide();weakMsg.show();return;}if (!strong.test(pwd)) {// mediumpbar.removeClass("weak strong").addClass("medium");weakMsg.hide();strongMsg.hide();mediumMsg.show();return;}// strongpbar.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;
}