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> 织梦好，好织梦
这个页面使用 JavaScript 来确认登录时用户名和密码是否为空，表单名为 formLogin，两个输入组件名为 txtUsername 和 txtPassword，当单击按钮时，将调用 JavaScript 函数 isEmpty()，根据条件判定显示对话框或是提交表单。 织梦好，好织梦
要注重的是，不能在 JavaScript 函数中使用如下类似语法来访问表单组件：
document.formLogin.txtUsername.value;
而应使用：
document.getElementById("formLogin:txtUsername").value;
或者：
document.forms.formLogin["formLogin:txtUsername"].value; copyright dedecms
这是因为 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="提交"
文章评论
共有位Admini5网友发表了评论 查看完整内容