<br> <h:outputLabel value="密码:" /> <h:inputSecret value="#{LoginManager.password}" id="txtPassword" styleClass="formText" /> </div> <div id="submit"> <h:commandButton value="提交" action="#{LoginManager.check}" onclick="return isEmpty();" styleClass="formButton" /> <h:commandButton value="重置" type="button" onclick="javascript:document.getElementById('formLogin').reset(); document.getElementById('formLogin:txtUsername').focus();" styleClass="formButton" /> </div> </h:form> </f:view> </center> </body> </html>
这个页面使用 JavaScript 来确认登录时用户名和密码是否为空,表单名为 formLogin,两个输入组件名为 txtUsername 和 txtPassword,当单击按钮时,将调用 JavaScript 函数 isEmpty(),根据条件判断显示对话框或是提交表单。
要注意的是,不能在 JavaScript 函数中使用如下类似语法来访问表单组件: document.formLogin.txtUsername.value; 而应使用: document.getElementById("formLogin:txtUsername").value; 或者: document.forms.formLogin["formLogin:txtUsername"].value;
这是因为 JSF 解释上面的 <h:form id="formForm">...</h:form> 一段时会生成如下代码:
<form id="formLogin" method="post" action="/Project_Blog/login.faces"
上一篇:用JavaScript实现仿Windows关机效果
下一篇:判断输入字符串为颜色类型的最优方法
|