我需要验证(检查数字是否小于 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 并不像“表单”那么简单 - 名称还包含“:”，而 JavaScript 无法处理它们。
最佳答案
忘记添加额外的 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>
另请参阅:
关于javascript - Primefaces 中的客户端验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29741968/