如何通过ajax验证两个密码字段？

Question

我正在尝试使用 JSF 验证两个密码字段，但到目前为止效果不佳，我在 google 上搜索它，但所有内容都是关于 JSF 1.2 的，而且相当混乱，我使用的是 JSF 2.0。

这就是我目前正在做的事情：

        <h:outputLabel for="password" value="Password:" />
        <h:inputSecret id="password"  value="#{register.user.password}"  >  
            <f:ajax    event="blur"   listener="#{register.validatePassword}" render="m_password" />
        </h:inputSecret>
        <rich:message id="m_password" for="password"/>

        <h:outputLabel for="password_2" value="Password (again):" />
        <h:inputSecret id="password_2"  value="#{register.user.password_2}"  >  
            <f:ajax    event="blur"     listener="#{register.validatePassword}" />
        </h:inputSecret>

这就是我的控制器：

public void validatePassword() {
    FacesMessage message;

    if (!user.getPassword().equals(user.getPassword_2()) ){
        message = new FacesMessage(FacesMessage.SEVERITY_ERROR, null, "different password");
    }else{
        message = new FacesMessage(FacesMessage.SEVERITY_INFO, null, "ok");
    }

    FacesContext.getCurrentInstance().addMessage("form:password", message);
}

有什么想法吗？

Answer 1

您可以使用Primefaces p:password 标签。请看演示example。它有 ma​​tch 属性，应该是确认密码的 id。

<p:panel header="Match Mode">  
    <p:messages id="messages" showDetail="true" autoUpdate="true"/>  

    <h:panelGrid columns="2" id="matchGrid">                     
                <h:outputLabel for="pass" value="Password " />  
                <p:password id="pass" value="#{passwordBean.password}" match="confirmPass"   required="true"/>  

                <h:outputLabel for="confirmPass" value="Confirm Password " />  
                <p:password id="confirmPass" value="#{passwordBean.confirmPassword}" required="true"/>  
    </h:panelGrid>  

    <p:commandButton id="saveButton" update="matchGrid" value="Save" />  
</p:panel>

Answer 2

首先，使用 real Validator 来验证输入。不要在动作事件方法中这样做。

至于您的具体问题，您只需在<f:ajax> 的execute 属性中指定both 字段，即默认为仅当前组件。如果您将验证器附加到第一个输入并将第二个输入的值作为<f:attribute> 发送，那么您将能够在验证器中获取它。您可以使用binding 属性将组件绑定到视图。这样您就可以通过UIInput#getSubmittedValue() 传递其提交的值。

这是一个启动示例：

<h:outputLabel for="password" value="Password:" />
<h:inputSecret id="password" value="#{bean.password}" required="true">
    <f:validator validatorId="confirmPasswordValidator" />
    <f:attribute name="confirm" value="#{confirmPassword.submittedValue}" />
    <f:ajax event="blur" execute="password confirm" render="m_password" />
</h:inputSecret>
<h:message id="m_password" for="password" />

<h:outputLabel for="confirm" value="Password (again):" />
<h:inputSecret id="confirm" binding="#{confirmPassword}" required="true">
    <f:ajax event="blur" execute="password confirm" render="m_password m_confirm" />
</h:inputSecret>
<h:message id="m_confirm" for="confirm" />

（请注意，我在两个组件中都添加了required="true"，并且还请注意，您不一定需要将确认密码组件值绑定到托管 bean 属性，反正在那里毫无价值）

使用此验证器

@FacesValidator("confirmPasswordValidator")
public class ConfirmPasswordValidator implements Validator {

    @Override
    public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
        String password = (String) value;
        String confirm = (String) component.getAttributes().get("confirm");

        if (password == null || confirm == null) {
            return; // Just ignore and let required="true" do its job.
        }

        if (!password.equals(confirm)) {
            throw new ValidatorException(new FacesMessage("Passwords are not equal."));
        }
    }

}

Answer 3

使用 seam 2，您拥有组件 <s:validateEquality>，您无需编写代码。对于 JSF2，您拥有 Seam 3 模块，特别是 Faces module 和跨字段表单验证。一个例子：

首先你必须使用 s:validateForm 标签：

<h:form id="passwordForm">
    <h:inputSecret id="newPassword"
        required="true"
        redisplay="true"
        value="#{passwordController.newPassword}">
    </h:inputSecret>            
    <h:inputSecret id="confirmationPassword"
        value="#{passwordController.confirmPassword}"
        required="true"
        redisplay="true">
    </h:inputSecret>
    <h:commandButton id="submit" value="Submit" action="#{passwordController.submitPassword}" />
    <s:validateForm validatorId="passwordValidator" />
</h:form>

上面密码表单对应的验证器如下所示：

@FacesValidator("PasswordValidator")
public class PasswordValidator implements Validator
{
   @Inject
   @InputField
   private String newPassword;

   @Inject
   @InputField
   private String confirmPassword;

   @Override
   public void validate(final FacesContext context, final UIComponent comp, final Object values) throws ValidatorException
   {
      if (!confirmPassword.equals(newPassword))
      {
         throw new ValidatorException(new FacesMessage("Passwords do not match!"));
      }
   }
}