用户操作
[即时聊天] [发私信] [加为好友]
json123ID：json123
共1695次访问，排名2万外好友0人，关注者0人
json123的文章
原创 8 篇
翻译 0 篇
转载 0 篇
评论 0 篇
json123的公告
最近评论
文章分类
    收藏
      相册
      存档
      订阅我的博客
      XML聚合  FeedSky

      原创 JavaScript 访问 JSF 组件收藏

      新一篇: Ajax开发：Javascript的对象 | 旧一篇: 用javascript调用webservice

      先看下面的 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="#" id="txtUsername"
                    styleClass      ="formText" />
                        <br>
                        <h:outputLabel value="密码：" />
                        <h:inputSecret value="#" id="txtPassword"
                    styleClass      ="formText" />
                      </div>
                      <div id="submit">
                        <h:commandButton value="提交" action="#"
                    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="&#25552;&#20132;"
            onclick      ="return isEmpty();" class="formButton" />
                <input type="button" name="formLogin:_id3" value="&#37325;&#32622;"
            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;
       

      发表于 @ 2008年04月13日 23:10:00|评论(loading...)|编辑

      新一篇: Ajax开发：Javascript的对象 | 旧一篇: 用javascript调用webservice

      评论：没有评论。
      Csdn Blog version 3.1a
      Copyright © json123