JavaScript 访问 JSF 组件的方法

先看下面的 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 ="&#25552;&#20132;"
      onclick ="return isEmpty();"  class ="formButton"   />
     < input  type ="button"  name ="formLogin:_id3"  value ="&#37325;&#32622;"
      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;