网站建设负责人证明,网页设计基础代码,在线做venn图网站,seo关键词排名系统使用JavaScript验证密码强度是一项常见任务。 在本文中#xff0c;我将展示如何向基于JSF的Web应用程序添加密码强度指示器。 的 PrimeFaces中的密码组件已经具有密码强度的反馈指示符#xff0c;但是它有两个主要缺点#xff1a; 反馈指示器没有响应#xff08;固定宽度… 使用JavaScript验证密码强度是一项常见任务。 在本文中我将展示如何向基于JSF的Web应用程序添加密码强度指示器。 的 PrimeFaces中的密码组件已经具有密码强度的反馈指示符但是它有两个主要缺点 反馈指示器没有响应固定宽度不适合移动设备等 密码强度验证的规则在JavaScript中进行了硬编码。 无法自定义。 我们需要的是一个外观漂亮易于自定义且响应Swift的密码强度指示器/仪表。 幸运的是PrimeFaces还有另一个组件– 进度栏 可以用于我们的目的。 这不是滥用。 最终结果实际上令人印象深刻。 让我们从XHTML开始。 首先定义一个非常普通的密码字段。 p:password idpasswort value#{mybean.password} labelPassword requiredtrue autocompleteoff/ 其次定义一个带有displayOnly ” true”的进度条和一些提示密码的信息弱中强。 div stylewhite-space:nowrap;h:outputText valuePassword strength /h:outputText idpwdWeak valueweak styledisplay:none styleClassbold weakMsg/h:outputText idpwdMedium valuemedium styledisplay:none styleClassbold mediumMsg/h:outputText idpwdStrong valuestrong styledisplay:none styleClassbold strongMsg/
/div
p:progressBar idpwdStrength value0 styleClasspwdStrength displayOnlytrue/ 让我们转到JavaScript部分。 我们需要一个脚本块放在pprogressBar之后的某个地方在这里我们打算调用自定义JS函数setupPasswordStrength。 script typetext/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;
}翻译自: https://www.javacodegeeks.com/2014/07/how-to-implement-a-custom-password-strength-indicator-in-jsf.html
