当前位置导航:炫浪网>>网络学院>>网页制作>>JavaScript教程

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;

相关内容
赞助商链接