【标题】：JavaScript 访问 JSF 组件的方法
【关键字】：JavaScript,JSF
【来源】：http://blog.csdn.net/grock304/archive/2006/12/02/1425798.aspx

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>

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;

在 Bean 中获得 Access 文件的绝对路径：【上一篇】
MyEclipse + WebLogic 开发 EJB 需注意：【下一篇】

【相关文章】

javascript 事件处理 IE和标准dom 的差别

JavaScript就这么回事

Just another high performance string format function for JavaScript

javascript 之趣味函数式编程

JavaScript写作技巧,函数A中调用函数B, 怎样在函数B中写代码中断函数A的运行?

Flickr让javascript和css更快