日韩精品中文字幕在线,国产视频一区二区不卡,一级在线视频

JavaScript 訪問 JSF 組件的方法

Posted on 2007-06-12 23:14 Linden.zhang 閱讀(148) 評論(0) 編輯收藏所屬分類: 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>

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>

<f:view>

<h:form id="formLogin">

<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>

<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">

<input id="formLogin:txtUsername" type="text"

name="formLogin:txtUsername" class="formText" />

<br>

<input id="formLogin:txtPassword" type="password"

name="formLogin:txtPassword" value="" class="formText" />

</div>

<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>

</form>

JSF 產生的所有表單控件都有符合 formName:componentName 格式的名稱，這里的 formName 表示控件的表單的名稱，而 componentName 表示組件名稱。如果沒有指定 id 屬性，則 JSF 框架會自動創建標識符，就象上面的 HTML 片段中的按鈕一樣。因此，要訪問上面的用戶名字段，必須使用下列方法：
document.getElementById("formLogin:txtUsername").value;

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JavaScript 訪問 JSF 組件的方法 JSF中實現分頁（三） JSF中實現分頁（二） JSF中實現分頁（一） JSF入門與提高目錄 AJAX+JSF組件實現高性能的文件上載 jsf國際化 jsf簡單例子

Linden.zhang

JavaScript 訪問 JSF 組件的方法

日歷

常用鏈接

留言簿(2)

隨筆檔案

文章分類

文章檔案

搜索

最新評論