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 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中的密码组件已经具有密码强度的反馈指示符,但是它有 ...
- 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 ...
- linux更改root密码_如何在Linux中更改root密码
linux更改root密码 Let's go over the simple commands to change the root password in Linux. Linux root ref ...
- wordpress 古腾堡_如何在WordPress中创建自定义古腾堡块(简便方法)
wordpress 古腾堡 Do you want to create a custom Gutenberg block for your WordPress site? After the Word ...
- tableau可视化_如何在Tableau中构建自定义地图可视化
tableau可视化 Sometime last year, I got fascinated with bubble charts when I saw a data visualization v ...
- java中退订程序怎么写_如何在RxJava中的自定义Observable中获得观察者的退订操作的通知...
订阅者抽象类实际上有一个方法add,可以添加将取消订阅订阅的订阅. def myObservable = Observable.create({ aSubscriber -> val liste ...
- figma设计_如何在Figma中构建设计入门套件(第1部分)
figma设计 Figma教程 (Figma Tutorial) Do you like staring at a blank canvas every time you start a new pr ...
- 在excel日期比对大小_如何在Excel中防止分组日期
在excel日期比对大小 As a teenager, group dates can be fun. If you have strict parents, that might be the on ...
最新文章
- SpringBoot中使用ShardingJdbc切分数据库表
- 算法章节 递归、排序、⼆分查找
- SpringMVC接收哪些类型参数参数
- JavaScript实现HTML导航栏下拉菜单[悬浮显示]
- java判断子串重复_判断字符串是否是由子串重复多次构成
- Linux各个文件夹的作用
- 基于模糊控制的十字路口交通红绿灯控制matlab仿真
- SEO集思广益,如何做到效果最佳?
- 第5篇 熊猫烧香逆向分析(下)
- 电脑CapsLock大小写切换不回来?
- QT安装段错误segmentation fault
- 【NOI2001】【SSL1384】 【TOI 1023】【POJ 1185】炮兵阵地
- Android开屏视频广告
- 基于网页网站在线视频点播系统 毕业设计毕设源码毕业论文开题报告参考(3)网站后台系统管理功能
- 设备互联(三)多屏协同简析
- 抽卡计算机在线,《闪耀暖暖》抽卡概率计算器
- 基于pytorch简单实现稀疏3d卷积(SECOND)
- C++学习--布尔值函数的返回值
- 四叶草云演-CTF03# ereg
- java语言的执行模式是什么,Java语言的执行模式是()?
热门文章
- 【jzoj3734,Usaco2014Open银组】双导航(gpsdual)
- 【结论】取石子游戏(jzoj 1211)
- 操作系统复习笔记 06 CPU Scheduling CPU调度
- 操作系统复习笔记 04 Process 进程
- 5、java中的数组
- Spring @Import注解配置类方法内部调用没有注入属性值的坑
- Spark入门(四)Idea远程提交项目到spark集群
- mybatis更新Blob类型字段要用updateByPrimaryKeyWithBLOBs
- 业务太复杂?教你如何降低软件的复杂性
- HashMap在java并发中如何发生死循环