您好我正在做包含常见字段的简单注册页面,我想使用f:ajax
在jsf中练习ajax。如果表单中的任何字段都没有验证,则h:outputText
正在正常更新。当我向事件触发的字段添加验证但是它没有更新h:outputText
组件。这是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>JSF Tutorial!</title>
<h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>
<!-- <h:outputStylesheet library="css" name="materialize.css"></h:outputStylesheet> -->
<h:outputScript library="js" name="script.js"></h:outputScript>
</h:head>
<h:body>
<p style="text-align: center">
<!-- <h:graphicImage styleClass="table" -->
<!-- value="http://vijayinfoart.com/wp-content/themes/theme46787/images/logo.png" /> -->
</p>
<h3 style="text-align: center">REGISTRATION FORM</h3>
<h:form>
<h:messages
style="color:red;margin:8px;text-align:center;list-style-type:none;" />
<h:panelGrid id="panel" columns="2" cellpadding="10" cellspacing="1"
styleClass="table">
<h:outputText value="User Name:" escape="false" />
<h:inputText value="#{display.user}" required="true" label="User ID"
id="userName">
<f:validateRegex pattern="[A-Za-z]*[\.][A-Za-z]*"></f:validateRegex>
<!-- <f:validator validatorId="com.jason.jsf.custom.Myvalidator"></f:validator> -->
</h:inputText>
<h:outputText value="Email:" escape="false" />
<h:inputText value="#{display.email}" required="true"
label="Email ID"
validatorMessage="#{display.email} is not valid email">
<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
<f:ajax execute="userName" render="outputMessage" event="blur" />
</h:inputText>
<h:outputText value="Password" escape="false" />
<h:inputSecret value="#{display.password}" id="password"
required="true" label="Password">
<f:validateLength for="password" minimum="6" maximum="10" />
<f:validateRegex pattern="((?=.[0-9]+).{6,})"></f:validateRegex>
</h:inputSecret>
<h:outputText value="Address" escape="false" />
<h:inputTextarea rows="3" cols="22" value="#{display.address}" />
<h:outputText value="Programmer" escape="false" />
<h:selectBooleanCheckbox id="chkstatus" onclick="show()"
value="#{display.status}" />
<h:outputText value="Skills" escape="false" />
<h:selectManyCheckbox value="#{display.skills}">
<f:selectItem itemValue="java" itemLabel="JAVA" />
<f:selectItem itemValue="php" itemLabel="PHP" />
<f:selectItem itemValue="ruby" itemLabel="RUBY" />
<f:selectItem itemValue=".net" itemLabel=".NET" />
</h:selectManyCheckbox>
<h:outputText value="Gender" escape="false" />
<h:selectOneRadio value="#{display.gender}">
<f:selectItem itemValue="Male" itemLabel="Male" />
<f:selectItem itemValue="female" itemLabel="Female" />
</h:selectOneRadio>
<h:outputText value="Work Mode" escape="false" />
<h:selectOneListbox value="#{display.mode}">
<f:selectItem itemValue="Parttime" itemLabel="Part Time" />
<f:selectItem itemValue="fulltime" itemLabel="Full Time" />
<f:selectItem itemValue="work from home" itemLabel="Work from Home" />
</h:selectOneListbox>
<h:outputText value="Database Skills" escape="false" />
<h:selectManyListbox value="#{display.dblist}">
<f:selectItem itemValue="hibernate" itemLabel="HIBERNATE" />
<f:selectItem itemValue="jpa" itemLabel="JPA" />
<f:selectItem itemValue="oracle" itemLabel="ORACLE" />
<f:selectItem itemValue="mysql" itemLabel="MYSQL" />
<f:selectItem itemValue="MangoDB" itemLabel="MANGO DB" />
</h:selectManyListbox>
<h:outputText value="Certifications" escape="false" />
<h:selectOneMenu value="#{display.frameworks}">
<f:selectItem itemValue="SCJP"
itemLabel="Sun Certified Java Programmer" />
<f:selectItem itemValue="ocda"
itemLabel="Oracle Certified Database Administrator" />
<f:selectItem itemValue="ocdd"
itemLabel="Oracle Certified Database Developer" />
</h:selectOneMenu>
<h:outputText value="Already a member?" escape="false" />
<h:link value="Click Here!" outcome="page1" />
<h:commandButton value="Submit" action="display">
<f:setPropertyActionListener target="#{display.application}"
value="Registration"></f:setPropertyActionListener>
</h:commandButton>
<h:commandButton value="cancel">
<f:ajax execute="userName" render="outputMessage" />
</h:commandButton>
</h:panelGrid>
<h2></h2>
<h:outputText id="outputMessage"
value="#{display.welcomeMessage !=null ?
display.welcomeMessage : 'y'}" />
</h:form>
</h:body>
</html>
有人可以告诉我fs中的f:ajax行为吗?我怎样才能在页面中处理ajax和ajax。 提前致谢