先看下面的 JSF 页面：
<%...@ page language="java" pageEncoding="UTF-8"%><%...@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%><%...@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%><html> <head> <title>My JSF 'login.jsp' starting page</title> <script type="text/javascript">... function isEmpty() ...{ var username = document.getElementById("formLogin:txtUsername").value; var password = document.getElementById("formLogin:txtPassword").value; if(username == "") ...{ alert("给老子输用户名！"); document.getElementById("formLogin:txtUsername").focus(); return false; } if(password == "") ...{ alert("不输密码你登录个铲铲！"); document.getElementById("formLogin:txtPassword").focus(); return false; } } </script> </head> <body> <center> <f:view> <h:form id="formLogin"> <div id="input"> <h:outputLabel value="用户名：" /> <h:inputText value="#{LoginManager.username}" id="txtUsername" styleClass="formText" /> <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" enctype="application/x-www-form-urlencoded"> <div id="input"> <label>用户名：</label> <input id="formLogin:txtUsername" type="text" name="formLogin:txtUsername" class="formText" /> <br> <label>密码：</label> <input id="formLogin:txtPassword" type="password" name="formLogin:txtPassword" value="" class="formText" /> </div> <div id="submit"> <input type="submit" name="formLogin:_id2" value="提交" onclick="return isEmpty();" class="formButton" /> <input type="button" name="formLogin:_id3" value="重置" onclick="javascript:document.getElementById('formLogin').reset(); document.getElementById('formLogin:txtUsername').focus();" class="formButton" /> </div> <input type="hidden" name="formLogin" value="formLogin" /></form>
JSF 产生的所有表单控件都有符合 formName:componentName 格式的名称，这里的 formName 表示控件的表单的名称，而 componentName 表示组件名称。如果没有指定 id 属性，则 JSF 框架会自动创建标识符，就象上面的 HTML 片段中的按钮一样。因此，要访问上面的用户名字段，必须使用下列方法：
document.getElementById("formLogin:txtUsername").value;
Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长：MinTao ICP备案号：鄂ICP备11006601号-18
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
