首頁 > 開發者 > JavaScript
先看下面的 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;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
