primefaces

你們中有些人已經知道我和我的合著者Mert?al??kan正在研究PrimeFaces Cookbook的2.版。 Packt Publishing允許我從新章節“客戶端驗證”的一個食譜中摘錄一小部分摘錄。 這將有助于使讀者知道這本書的內容。 在此博客文章中，我想討論使用Bean驗證擴展的PrimeFaces客戶端驗證（CSV）。

Bean Validation是一個驗證模型，可作為Java EE 6平臺的一部分使用，它允許通過約束將字段，方法或類上的批注形式的驗證。 JSF 2.2支持對托管bean以及Spring或CDI bean中的字段（屬性及其getter / setter）的驗證。 只要不使用OmniFaces之類的實用程序，尚不支持在類級別進行驗證。

PrimeFaces的CSV與Bean驗證具有內置集成。 注釋定義的約束可以通過CSV框架在客戶端進行驗證。 盡管Bean Validation API定義了一整套標準約束注釋，但可以輕松想到這些標準注釋不足的情況。 對于這些情況，您可以為特定的驗證要求創建自定義約束。 PrimeFaces中的客戶端驗證API與自定義約束無縫協作。

在本食譜中，我們將開發一種特殊的自定義約束和驗證器，以驗證卡驗證碼（ CVC ）。 CVC與銀行卡號一起用作安全功能。 它是一個長度在三到四位數之間的數字。 例如，萬事達卡或Visa卡需要三位數，而美國運通卡需要四位數。 因此，CVC驗證將取決于所選的銀行卡。 用戶可以通過p:selectOneMenu選擇銀行卡，在p:inputText鍵入CVC，然后提交輸入。

怎么做…

我們將從用于CVC字段的自定義注釋開始。

import org.primefaces.validate.bean.ClientConstraint; import javax.validation.Constraint; import javax.validation.Payload; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; import static java.lang.annotation.ElementType.FIELD; import static java.lang.annotation.ElementType.METHOD;@Constraint(validatedBy = CvcConstraintValidator.class) @ClientConstraint(resolvedBy = CvcClientConstraint.class) @Target({FIELD, METHOD}) @Retention(RetentionPolicy.RUNTIME) public @interface ValidCVC {String message() default "{invalid.cvc.message}";Class<?>[] groups() default {};Class<? extends Payload>[] payload() default {};// identifier of the select menu with cardsString forCardMenu() default ""; }

@Constraint是來自Bean Validation API的常規注釋，而@ClientConstraint是來自PrimeFaces CSV框架的注釋，它有助于解析元數據。 開發的注釋定義消息密鑰invalid.cvc.message并且具有Custom屬性forCardMenu 。 此屬性的值是任何有關PrimeFaces Selectors (PFS)搜索表達式，用于引用銀行卡的選擇菜單。 這是必需的，因為有效的CVC值取決于所選的卡。

CvcConstraintValidator的目標是驗證輸入長度。

public class CvcConstraintValidator implements ConstraintValidator<ValidCVC, Integer> {@Overridepublic void initialize(ValidCVC validCVC) {}@Overridepublic boolean isValid(Integer cvc, ConstraintValidatorContext context) {if (cvc == null || cvc < 0) {return false;}int length = (int) (Math.log10(cvc) + 1);return (length >= 3 && length <= 4);} }

CvcClientConstraint的目標是準備元數據。

public class CvcClientConstraint implements ClientValidationConstraint {private static final String CARDMENU_METADATA = "data-forcardmenu";@Overridepublic Map<String, Object> getMetadata(ConstraintDescriptor constraintDescriptor) {Map<String, Object> metadata = new HashMap<String, Object>();Map attrs = constraintDescriptor.getAttributes();String forCardMenu = (String) attrs.get("forCardMenu");if (StringUtils.isNotBlank(forCardMenu)) {metadata.put(CARDMENU_METADATA, forCardMenu);}return metadata;}@Overridepublic String getValidatorId() {return ValidCVC.class.getSimpleName();} }

讓我們轉到客戶端實現。 首先，我們必須創建一個JavaScript文件，說validators.js ，并命名空間中的注冊有自己的驗證PrimeFaces.validator名為ValidCVC 。 此名稱是由getValidatorId()方法返回的唯一ID（請參見類CvcClientConstraint ）。 要實現的功能稱為validate() 。 它有兩個參數：元素本身和要驗證的當前輸入值。

PrimeFaces.validator['ValidCVC'] = {MESSAGE_ID: 'invalid.cvc',validate: function (element, value) {// find out selected menu valuevar forCardMenu = element.data('forcardmenu');var selOption = forCardMenu ?PrimeFaces.expressions.SearchExpressionFacade.resolveComponentsAsSelector(forCardMenu).find("select").val() : null;var valid = false;if (selOption && selOption === 'MCD') {// MasterCardvalid = value > 0 && value.toString().length == 3;} else if (selOption && selOption === 'AMEX') {// American Expressvalid = value > 0 && value.toString().length == 4;}if (!valid) {throw PrimeFaces.util.ValidationContext.getMessage(this.MESSAGE_ID);}} };

其次，我們必須為本地化消息創建一個JavaScript文件，例如lang_en.js 。

PrimeFaces.locales['en'] = {messages : PrimeFaces.locales['en_US'].messages };$.extend(PrimeFaces.locales['en'].messages, {...'invalid.cvc':'Card Validation Code is invalid' });

Bean具有兩個必需屬性，并帶有@NotNull注釋。 另外，屬性cvc帶有我們的自定義注釋@ValidCVC 。 forCardMenu的屬性forCardMenu指向p:selectOneMenu的樣式類，該樣式類列出了可用的銀行卡。

@Named @ViewScoped public class ExtendCsvBean implements Serializable {@NotNullprivate String card;@NotNull@ValidCVC(forCardMenu = "@(.card)")private Integer cvc;public void save() {RequestContext.getCurrentInstance().execute("alert('Saved!')");}// getters / setters... }

在XHTML片段中，我們有一個帶有兩個銀行卡的選擇菜單和一個CVC輸入字段。 p:commandButton驗證字段并在回發時執行方法save() 。

<h:panelGrid id="pgrid" columns="3" cellpadding="3" style="margin-bottom:10px;"><p:outputLabel for="card" value="Card"/><p:selectOneMenu id="card" styleClass="card"value="#{extendCsvBean.card}"><f:selectItem itemLabel="Please select a card"itemValue="#{null}"/><f:selectItem itemLabel="MasterCard"itemValue="MCD"/><f:selectItem itemLabel="American Express"itemValue="AMEX"/></p:selectOneMenu><p:message for="card"/><p:outputLabel for="cvc" value="CVC"/><p:inputText id="cvc" value="#{extendCsvBean.cvc}"/><p:message for="cvc"/> </h:panelGrid><p:commandButton validateClient="true" value="Save"process="@this pgrid" update="pgrid" action="#{extendCsvBean.save}"/>

注意：如您所見， p:selectOneMenu和p:inputText指定必需的屬性。 我們可以實現的轉變@NotNull注釋與價值所需要的屬性， true ，如果我們設置的參數范圍內primefaces.TRANSFORM_METADATA至true 。

在最后一步中，所有必需JavaScript文件都必須包含在頁面上。

<h:outputScript library="js" name="chapter10/lang_en.js"/> <h:outputScript library="js" name="chapter10/validators.js"/>

下兩張圖片顯示驗證失敗時會發生什么

如果一切正常，則出現一個帶有已保存文本的警告框。 向用戶顯示。

這個怎么運作…

消息密鑰invalid.cvc.message和文本應放在名為ValidationMessages資源包中，例如ValidationMessages_en.properties 。 ValidationMessages是Bean驗證規范中指定的標準名稱。 屬性文件應位于應用程序類路徑中，并包含以下條目： invalid.cvc.message=Card Validation Code is invalid 。 此配置對于服務器端驗證很重要。

類CvcClientConstraint的方法getMetadata()提供具有名稱，值對的映射。 元數據在呈現HTML中公開。 可以通過element.data(name)在客戶端訪問這些值，其中element是基礎本機HTML元素的jQuery對象。 具有元數據的CVC字段呈現為

<input type="text" data-forcardmenu="@(.card)"data-p-con="javax.faces.Integer" data-p-required="true"...>

最有趣的部分是客戶端驗證器的實現。 要驗證的值已經是數字，因為首先它由PrimeFaces的內置客戶端轉換器針對數據類型java.lang.Integer轉換。 我們只需要檢查該值是否為正且具有有效長度。 有效長度取決于菜單p:selectOneMenu中所選的卡片，PrimeFaces JavaScript API可以將其作為PrimeFaces.expressions.SearchExpressionFacade.resolveComponentsAsSelector(selector)進行訪問，其中選擇器是任何PrimeFaces選擇器，在本例中為@(.card) 。 如果驗證失敗，則通過引發throw PrimeFaces.util.ValidationContext.getMessage(text, parameter)引發異常。

通過在p:commandButton上設置validateClient=”true”來觸發客戶端驗證。

翻譯自: https://www.javacodegeeks.com/2015/01/extending-primefaces-csv-with-bean-validation.html

primefaces

總結

以上是生活随笔為你收集整理的primefaces_使用Bean验证扩展PrimeFaces CSV的全部內容，希望文章能夠幫你解決所遇到的問題。

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