JavaScript 访问 JSF 组件的方法

难忘樱花 · 发表于 2007-8-1 18:10

先看下面的 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

utputLabel value=\"用户名：\" />
   <h:inputText value=\"#{LoginManager.username}\" id=\"txtUsername\"
   styleClass=\"formText\" />
   <br>
   <h

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

帐号		自动登录	找回密码
密码			成为会员