JavaScript 访问 JSF 组件的方法
2006-12-02 02:18
411 查看
先看下面的 JSF 页面:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
<%...@ page language="java" pageEncoding="UTF-8"%>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
<%...@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
<%...@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<html>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<head>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<title>My JSF 'login.jsp' starting page</title>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript">...
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
function isEmpty() ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var username = document.getElementById("formLogin:txtUsername").value;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var password = document.getElementById("formLogin:txtPassword").value;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if(username == "") ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
alert("给老子输用户名!");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
document.getElementById("formLogin:txtUsername").focus();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
return false;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if(password == "") ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
alert("不输密码你登录个铲铲!");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
document.getElementById("formLogin:txtPassword").focus();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
return false;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
</script>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</head>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<body>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<center>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<f:view>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:form id="formLogin">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="input">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:outputLabel value="用户名:" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:inputText value="#{LoginManager.username}" id="txtUsername"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
styleClass="formText" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<br>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:outputLabel value="密码:" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:inputSecret value="#{LoginManager.password}" id="txtPassword"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
styleClass="formText" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="submit">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:commandButton value="提交" action="#{LoginManager.check}"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
onclick="return isEmpty();" styleClass="formButton" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:commandButton value="重置" type="button"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
onclick="javascript:document.getElementById('formLogin').reset();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
document.getElementById('formLogin:txtUsername').focus();"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
styleClass="formButton" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</h:form>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</f:view>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</center>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</body>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</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> 一段时会生成如下代码:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<form id="formLogin" method="post" action="/Project_Blog/login.faces"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
enctype="application/x-www-form-urlencoded">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="input">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<label>用户名:</label>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input id="formLogin:txtUsername" type="text"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
name="formLogin:txtUsername" class="formText" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<br>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<label>密码:</label>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input id="formLogin:txtPassword" type="password"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
name="formLogin:txtPassword" value="" class="formText" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="submit">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input type="submit" name="formLogin:_id2" value="提交"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
onclick="return isEmpty();" class="formButton" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input type="button" name="formLogin:_id3" value="重置"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
onclick="javascript:document.getElementById('formLogin').reset();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
document.getElementById('formLogin:txtUsername').focus();" class="formButton" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input type="hidden" name="formLogin" value="formLogin" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</form>
JSF 产生的所有表单控件都有符合 formName:componentName 格式的名称,这里的 formName 表示控件的表单的名称,而 componentName 表示组件名称。如果没有指定 id 属性,则 JSF 框架会自动创建标识符,就象上面的 HTML 片段中的按钮一样。因此,要访问上面的用户名字段,必须使用下列方法:
document.getElementById("formLogin:txtUsername").value;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
<%...@ page language="java" pageEncoding="UTF-8"%>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
<%...@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
<%...@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<html>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<head>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<title>My JSF 'login.jsp' starting page</title>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript">...
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
function isEmpty() ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var username = document.getElementById("formLogin:txtUsername").value;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var password = document.getElementById("formLogin:txtPassword").value;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if(username == "") ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
alert("给老子输用户名!");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
document.getElementById("formLogin:txtUsername").focus();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
return false;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if(password == "") ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
alert("不输密码你登录个铲铲!");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
document.getElementById("formLogin:txtPassword").focus();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
return false;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
</script>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</head>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<body>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<center>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<f:view>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:form id="formLogin">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="input">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:outputLabel value="用户名:" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:inputText value="#{LoginManager.username}" id="txtUsername"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
styleClass="formText" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<br>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:outputLabel value="密码:" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:inputSecret value="#{LoginManager.password}" id="txtPassword"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
styleClass="formText" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="submit">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:commandButton value="提交" action="#{LoginManager.check}"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
onclick="return isEmpty();" styleClass="formButton" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<h:commandButton value="重置" type="button"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
onclick="javascript:document.getElementById('formLogin').reset();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
document.getElementById('formLogin:txtUsername').focus();"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
styleClass="formButton" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</h:form>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</f:view>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</center>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</body>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</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> 一段时会生成如下代码:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<form id="formLogin" method="post" action="/Project_Blog/login.faces"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
enctype="application/x-www-form-urlencoded">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="input">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<label>用户名:</label>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input id="formLogin:txtUsername" type="text"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
name="formLogin:txtUsername" class="formText" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<br>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<label>密码:</label>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input id="formLogin:txtPassword" type="password"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
name="formLogin:txtPassword" value="" class="formText" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="submit">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input type="submit" name="formLogin:_id2" value="提交"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
onclick="return isEmpty();" class="formButton" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input type="button" name="formLogin:_id3" value="重置"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
onclick="javascript:document.getElementById('formLogin').reset();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
document.getElementById('formLogin:txtUsername').focus();" class="formButton" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input type="hidden" name="formLogin" value="formLogin" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</form>
JSF 产生的所有表单控件都有符合 formName:componentName 格式的名称,这里的 formName 表示控件的表单的名称,而 componentName 表示组件名称。如果没有指定 id 属性,则 JSF 框架会自动创建标识符,就象上面的 HTML 片段中的按钮一样。因此,要访问上面的用户名字段,必须使用下列方法:
document.getElementById("formLogin:txtUsername").value;
相关文章推荐
- JavaScript 访问 JSF 组件的方法zz
- JavaScript 访问 JSF 组件的方法
- JavaScript 访问 JSF 组件的方法
- JavaScript 访问 JSF 组件的方法
- JavaScript 访问 JSF 组件
- java基础:javascript如何访问jsf组件
- java基础:javascript如何访问jsf组件
- JavaScript 访问 JSF 组件
- java基础:javascript如何访问jsf组件
- javascript如何访问jsf组件
- sharepoint2010不能通过ip地址或localhost访问组件和自定义内容的解决方法
- JavaScript组件焦点与页内锚点间传值的方法
- 访问javascript对象的属性和方法
- Cocos Creator开发中访问节点和组件的方法总结
- Javascript访问Cookie的四个基本方法无论是在创建页面还是构建对象都会使用到,单独拿出来备用:
- 另一种Javascript访问后台方法
- 项目调试时候,出现其中用到的一个组件“访问被拒绝”的解决方法。(转载)
- js访问jsf的SelectOneRadio组件方式
- 解决SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问的方法
- 项目调试时候,出现其中用到的一个组件“访问被拒绝”的解决方法(摘自博客堂)