如何在JSF中使用JavaScript

JavaScript在客户端上用于各种任务。 当将JavaScript与纯HTML代码一起使用时，我们可以很容易地访问页面上的元素。 例如，以下HTML代码中的文本框：

[HTML] <表格名称=“ someForm” id =“ someForm”>

<input type =“ text” name =“ someName” id =“ someID” value =“”>

</ form> [/ HTML]可以这样访问：

var textbox = document.getElementById("someID");
// or an alternative way via the elements array:
textbox = document.forms["someForm"].elements["someName"];

如果我们想将JavaScript与JSF（Java Server Faces）一起使用怎么办？

在JSF或任何服务器端生成的代码中，我们需要查看客户端代码的外观。

首先，看一下这段代码

luxalexis ：

[HTML] <％@ taglib uri =“ http://java.sun.com/jsf/core” prefix =“ f”％>

<％@ taglib uri =“ http://java.sun.com/jsf/html”前缀=“ h”％>

<％@ taglib uri =“ http://geportal.ge.com/faces”前缀=“ g”％>

<f：view>

<script type =“ text / javascript”>

功能有效（窗体）

{

var Value = form [“ FormName：name”]。value;

如果（值==“”）

{

alert（“请输入主题”）;

form [“ FormName：name”]。focus（）;

返回false；

}

form.submit（）;

返回true；

}

</ script>

<h：form id =“ FormName”>

<h：outputText styleClass =“ jsf-output-text” value =“输入您的姓名” />

<h：panelGroup>

<h：inputText styleClass =“ jsf-output-text” id =“名称” value =“＃

{BeanName.attribute}“ required =” true“ />

<h：commandButton value =“提交” type =“提交” styleClass =“ jsf-command-button”

action =“＃{BeanName.function}” onclick =“返回有效的（this.form）;” />

</ h：panelGroup>

</ h：form>

</ f：view> [/ HTML]代码在提交表单之前验证输入字段（检查其是否输入了值）。

问题是我们如何访问文本字段进行检查。 为此，我们需要查看JSF组件如何在客户端呈现，尤其是名称/ id。 输入字段：

<h:inputText styleClass="jsf-output-text" id="name" value="#{BeanName.attribute}" required="true"/>

生成以下内容：

<input type="text" ... id="FormName:name" name="FormName:name" ...>

因此，标识将以以下格式转换为名称/标识：[表格名称]：[标识]。 我们可以使用它来访问输入元素。 上面的代码使用了传递的表单变量：form [“ FormName：name”]。 也可能是：

var Value = document.getElementById("FormName:name").value;
// or alternatively:
form.elements["FormName:name"].value;

当然，可以通过onsubmit执行表单验证，即

<h:form id="FormName" onsubmit="return valid(this)"> 

结论

我们已经看到了如何使用JavaScript访问JSF组件。 诀窍是了解JSF如何将组件呈现为HTML。 一旦使用JavaScript访问元素，就可以像使用普通HTML一样对元素进行验证，显示/隐藏和修改。 任何服务器端生成的代码都是如此。

希望您喜欢并编码愉快！

From: https://bytes.com/topic/javascript/insights/738607-how-use-javascript-jsf