如何在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 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
如何在JSF中实现自定义密码强度指示器相关推荐
- jsf 自定义属性_如何在JSF中实现自定义密码强度指示器
jsf 自定义属性 使用JavaScript验证密码强度是一项常见任务. 在本文中,我将展示如何向基于JSF的Web应用程序添加密码强度指示器. 的 PrimeFaces中的密码组件已经具有密码强度的 ...
- 如何在android中创建自定义对话框?
本文翻译自:How to create a Custom Dialog box in android? I want to create a custom dialog box like below ...
- hive 元数据 自定义_如何在Hive中创建自定义函数UDF及如何直接通过Impala的同步元数据重用UDF的jar文件-阿里云开发者社区...
如何在Hive中创建自定义函数UDF及使用 如何在Impala中使用Hive的自定义函数 UDF函数开发 使用Intellij工具开发Hive的UDF函数,进行编译: 1.使用Intellij工具通过 ...
- linux中更改用户密码_如何在Linux中更改用户密码
linux中更改用户密码 In this tutorial, we will focus on how you can change a user's password in Linux. We wi ...
- Word控件Spire.Doc 【加密解密】教程(一):在 C#、VB.NET 中使用自定义密码加密、解密、保护 Word
Word 加密是保护 Word 文档的一种方法,它要求用户为文档提供密码.没有密码,加密文件无法打开.本指南中的解决方案演示了如何通过 Spire.Doc for .NET 在 C# 和 VB.NET ...
- 如何在 Word 中使用自定义样式生成文章目录
如何在 Word 中使用自定义样式生成文章目录 概要 本文介绍如何在 Microsoft Word 2002 和 Microsoft Office Word 2003 中使用自定义样式创建目录.在 W ...
- ubtun服务器如何修改密码,如何在Ubuntu中更改root密码
root用户(或超级用户)是在所有Linux和Unix的系统上都存在的特殊用户.它具有对系统上的每个命令和任何资源的完全访问权限,而没有任何限制. 在Ubuntu系统中,默认情况下基于安全原因root ...
- 如何在Membership中实现修改密码的功能
2008-02-14 16:10 Membership中要修改密码,真是很麻烦,还要提供原密码或者密码保护的问题,不知道老外是如何想的,也许是微软太注重安全了吧,不过这就对我们造成了麻烦,客户的密码忘 ...
- 如何在PHP中保护数据库密码?
当PHP应用程序建立数据库连接时,通常当然需要传递登录名和密码. 如果我为我的应用程序使用单个最小权限登录名,则PHP需要在某个地方知道该登录名和密码. 保护该密码的最佳方法是什么? 似乎只在PHP代 ...
最新文章
- 5年5亿美金,华为昇腾如何构建全行业AI生态?
- @2021 高考生,用 Python 分析专业“钱景”
- Hive中文注释乱码解决方案
- C运行库和C语言函数库/Microsoft C运行库
- [LeetCode] Count Primes - 素数系列问题
- 使用WireMock进行更好的集成测试
- Java预科篇2-环境搭建
- php json 压缩传输,php json数据使用gzip压缩输出
- 【今日CS 视觉论文速览】14 Dec 2018
- ccs4c语言用户手册,CCS v4.x快速入门:EasyDsp开发套件产品手册
- java程序在内存中的存储分配
- 用python画动态图_Python使用matplotlib画动态图
- Google Code Review 浏览评论中的CL
- 2020大一下暑期实习--funcode游戏设计
- 如何免费下载百度文库,豆丁网等付费文章
- NMS非极大值抑制原理——目标检测
- sam卡和sim卡区别_PSAM卡、SAM卡与SIM卡
- python分号_python分号_python 分号_python加分号 - 云+社区 - 腾讯云
- 关于良率:交期延误、报废补料、不做退款都是什么情况?
- 使用GTK+获取屏幕分辨率并设置满屏显示效果
热门文章
- C++比较两个字符串是否完全相同
- 君威u0073故障码解决_顽疾修复过程,君威没倒挡的变速箱故障就是这样修好
- rpa文件怎么提取内容_怎么编辑pdf文件内容?有什么软件可以编辑pdf文件吗?
- (转)java动态代理与aop
- Java 截取反斜杠--java使用split拆分特殊字符
- java动态代理和cglib动态代理
- 如何用JS实现音乐播放、暂停
- spring注解注入IOC
- run spark pi_Spark Run本地设计模式
- 单选按钮:after_选择的按钮:将ToggleButtons用作单选按钮