先看下面的 JSF 页面
<%@ page language=java pageEncoding=UTF%>
<%@ taglib uri= prefix=h%>
<%@ taglib uri= prefix=f%>
<html>
<head>
<title>My JSF loginjsp starting page</title>
<script type=text/javascript>
function isEmpty() {
var username = documentgetElementById(formLogin:txtUsername)value;
var password = documentgetElementById(formLogin:txtPassword)value;
if(username == ) {
alert(给老子输用户名！);
documentgetElementById(formLogin:txtUsername)focus();
return false;
}
if(password == ) {
alert(不输密码你登录个铲铲！);
documentgetElementById(formLogin:txtPassword)focus();
return false;
}
}
</script>
</head>
<body>
<center>
<f:view>
<h:form id=formLogin>
<div id=input>
<h:outputLabel value=用户名 />
<h:inputText value=#{LoginManagerusername} id=txtUsername
styleClass=formText />
<br>
<h:outputLabel value=密码 />
<h:inputSecret value=#{LoginManagerpassword} id=txtPassword
styleClass=formText />
</div>
<div id=submit>
<h:commandButton value=提交 action=#{LoginManagercheck}
onclick=return isEmpty(); styleClass=formButton />
<h:commandButton value=重置 type=button
onclick=javascript:documentgetElementById(formLogin)reset();
documentgetElementById(formLogin:txtUsername)focus();
styleClass=formButton />
</div>
</h:form>
</f:view>
</center>
</body>
</html>
这个页面使用 JavaScript 来确认登录时用户名和密码是否为空表单名为 formLogin两个输入组件名为 txtUsername 和 txtPassword当单击按钮时将调用 JavaScript 函数 isEmpty()根据条件判断显示对话框或是提交表单
要注意的是不能在 JavaScript 函数中使用如下类似语法来访问表单组件
documentformLogintxtUsernamevalue;
而应使用
documentgetElementById(formLogin:txtUsername)value;
或者
documentformsformLogin[formLogin:txtUsername]value;
这是因为 JSF 解释上面的 <h:form id=formForm></h:form> 一段时会生成如下代码
<form id=formLogin method=post action=/Project_Blog/loginfaces
enctype=application/xwwwformurlencoded>
<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:_id value=&#;&#;
onclick=return isEmpty(); class=formButton />
<input type=button name=formLogin:_id value=&#;&#;
onclick=javascript:documentgetElementById(formLogin)reset();
documentgetElementById(formLogin:txtUsername)focus(); class=formButton />
</div>
<input type=hidden name=formLogin value=formLogin />
</form>
JSF 产生的所有表单控件都有符合 formName:componentName 格式的名称这里的 formName 表示控件的表单的名称而 componentName 表示组件名称如果没有指定 id 属性则 JSF 框架会自动创建标识符就象上面的 HTML 片段中的按钮一样因此要访问上面的用户名字段必须使用下列方法
documentgetElementById(formLogin:txtUsername)value;
