先看下面的 JSF 页面：
<%...@ page language="java" pageEncoding="UTF-8"%>E39Linux联盟
<%...@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>E39Linux联盟
<%...@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>E39Linux联盟
<html>E39Linux联盟
<head>E39Linux联盟
<title>My JSF 'login.jsp' starting page</title>E39Linux联盟
<script type="text/javascript">...E39Linux联盟
function isEmpty() ...{E39Linux联盟
var username = document.getElementById("formLogin:txtUsername").value;E39Linux联盟
var password = document.getElementById("formLogin:txtPassword").value;E39Linux联盟
if(username == "") ...{E39Linux联盟
alert("给老子输用户名！");E39Linux联盟
document.getElementById("formLogin:txtUsername").focus();E39Linux联盟
return false;E39Linux联盟
}E39Linux联盟
if(password == "") ...{E39Linux联盟
alert("不输密码你登录个铲铲！");E39Linux联盟
document.getElementById("formLogin:txtPassword").focus();E39Linux联盟
return false;E39Linux联盟
}E39Linux联盟
}E39Linux联盟
</script>E39Linux联盟
</head>E39Linux联盟
<body>E39Linux联盟
<center>E39Linux联盟
<f:view>E39Linux联盟
<h:form id="formLogin">E39Linux联盟
<div id="input">E39Linux联盟
<h:outputLabel value="用户名：" />E39Linux联盟
<h:inputText value="#{LoginManager.username}" id="txtUsername"E39Linux联盟
styleClass="formText" />E39Linux联盟
<br>E39Linux联盟
<h:outputLabel value="密码：" />E39Linux联盟
<h:inputSecret value="#{LoginManager.password}" id="txtPassword"E39Linux联盟
styleClass="formText" />E39Linux联盟
</div>E39Linux联盟
<div id="submit">E39Linux联盟
<h:commandButton value="提交" action="#{LoginManager.check}"E39Linux联盟
onclick="return isEmpty();" styleClass="formButton" />E39Linux联盟
<h:commandButton value="重置" type="button"E39Linux联盟
onclick="javascript:document.getElementById('formLogin').reset();E39Linux联盟
document.getElementById('formLogin:txtUsername').focus();"E39Linux联盟
styleClass="formButton" />E39Linux联盟
</div>E39Linux联盟
</h:form>E39Linux联盟
</f:view>E39Linux联盟
</center>E39Linux联盟
</body>E39Linux联盟
</html>
这个页面使用 JavaScript 来确认登录时用户名和密码是否为空，表单名为 formLogin，两个输入组件名为 txtUsername 和 txtPassword，当单击按钮时，将调用 JavaScript 函数 isEmpty()，根据条件判断显示对话框或是提交表单。
要注意的是，不能在 JavaScript 函数中使用如下类似语法来访问表单组件：E39Linux联盟
document.formLogin.txtUsername.value;E39Linux联盟
而应使用：E39Linux联盟
document.getElementById("formLogin:txtUsername").value;E39Linux联盟
或者：E39Linux联盟
document.forms.formLogin["formLogin:txtUsername"].value;
这是因为 JSF 解释上面的 <h:form id="formForm">...</h:form> 一段时会生成如下代码：
<form id="formLogin" method="post" action="/Project_Blog/login.faces"E39Linux联盟
enctype="application/x-www-form-urlencoded">E39Linux联盟
<div id="input">E39Linux联盟
<label>用户名：</label>E39Linux联盟
<input id="formLogin:txtUsername" type="text"E39Linux联盟
name="formLogin:txtUsername" class="formText" />E39Linux联盟
<br>E39Linux联盟
<label>密码：</label>E39Linux联盟
<input id="formLogin:txtPassword" type="password"E39Linux联盟
name="formLogin:txtPassword" value="" class="formText" />E39Linux联盟
</div>E39Linux联盟
<div id="submit">E39Linux联盟
<input type="submit" name="formLogin:_id2" value="提交"E39Linux联盟
onclick="return isEmpty();" class="formButton" />E39Linux联盟
<input type="button" name="formLogin:_id3" value="重置"E39Linux联盟
onclick="javascript:document.getElementById('formLogin').reset();E39Linux联盟
document.getElementById('formLogin:txtUsername').focus();" class="formButton" />E39Linux联盟
</div>E39Linux联盟
<input type="hidden" name="formLogin" value="formLogin" />E39Linux联盟
</form>
JSF 产生的所有表单控件都有符合 formName:componentName 格式的名称，这里的 formName 表示控件的表单的名称，而 componentName 表示组件名称。如果没有指定 id 属性，则 JSF 框架会自动创建标识符，就象上面的 HTML 片段中的按钮一样。因此，要访问上面的用户名字段，必须使用下列方法：
document.getElementById("formLogin:txtUsername").value;
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论
