Question

我需要验证（检查数字是否小于50000）html网站上的字段，某些表单内的字段。

<p:inputText id="xid" styleClass="span3"value="#{user.xd}" maxlength="5" required="true">
    // the validator does not work
    <f:validateLongRange maximum="50000" minimum="1"/>
    <p:clientValidator event="keyup"/>
</p:inputText>

我需要在用户写入数据时验证它。我也在检查jQuery代码：

$(document).ready(function() {
        $("#form").validate({
            rules: {
                xid: {
                    required: true,
                    maxlength: 5,
                    min: 1,
                    max: 50000
                }
            },
            messages: {
                xid: {
                    required: "This is mandatory. Either generated or  manually entered!",
                    maxlength: "Max length is 5 digits",
                    max: "Max Value is 50000",
                    min: "Min is 1",
                    pattern: "Cannot contain characters nor starting with 0."
                }
            }
        });
});

解决方案中的问题在于，当应用JSF时，表单的id不是那么简单，例如＆＃34; form＆＃34; - 名称也包含＆＃34;：＆＃34 ;并且JavaScript无法处理它们。

Answer 1

忘记添加额外的 jQuery 代码，并使用JSF验证器和PrimeFaces客户端验证器标签。您将看到输入字段对于大于50000的值变为红色。我个人倾向于使用change事件而不是keyUp，我认为它更加用户友好：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:comp="http://java.sun.com/jsf/composite/comp"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head />
<h:body>
    <h:form>
        <p:messages autoUpdate="true" />
        <p:inputText value="#{val}" maxlength="5" required="true">
            <f:validateLongRange maximum="50000" minimum="1" />
            <p:clientValidator event="change" />
        </p:inputText>
        <p:commandButton value="Check" />
    </h:form>
</h:body>
</html>

不要忘记在web.xml中启用客户端验证：

<context-param>
    <param-name>primefaces.CLIENT_SIDE_VALIDATION</param-name>
    <param-value>true</param-value>
</context-param>

另见：

Primefaces clientValidator message not displayed

Primefaces中的客户端验证

1 个答案: