JavaScript 訪問 JSF 組件的方法

來源:互聯網
上載者:User
javascript|js|訪問

先看下面的 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}"
              styleClass="formButton" />
            <h:commandButton value="重設" type="button"
             
              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="提交"
      class="formButton" />
    <input type="button" name="formLogin:_id3" value="重置"
      class="formButton" />
  </div>
  <input type="hidden" name="formLogin" value="formLogin" />
</form>
JSF 產生的所有表單控制項都有符合 formName:componentName 格式的名稱,這裡的 formName 表示控制項的表單的名稱,而 componentName 表示組件名稱。如果沒有指定 id 屬性,則 JSF 架構會自動建立標識符,就象上面的 HTML 片段中的按鈕一樣。因此,要訪問上面的使用者名稱欄位,必須使用下列方法:
document.getElementById("formLogin:txtUsername").value;



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。