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 >
<% @ 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 ="提交"
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 >
< input type ="hidden" name ="formLogin" value ="formLogin" />
</ form >
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 ="提交"
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 >
< input type ="hidden" name ="formLogin" value ="formLogin" />
</ form >
JSF 产生的所有表单控件都有符合 formName:componentName 格式的名称,这里的 formName 表示控件的表单的名称,而 componentName 表示组件名称。如果没有指定 id 属性,则 JSF 框架会自动创建标识符,就象上面的 HTML 片段中的按钮一样。因此,要访问上面的用户名字段,必须使用下列方法:
document.getElementById("formLogin:txtUsername").value;