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中实现自定义密码强度指示器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。