套用內建的 JavaScript 行為

上次更新時間 2021年4月27日

使用本主題了解如何在 Adobe Dreamweaver 中套用內建的 JavaScript 行為。

使用內建的行為

Dreamweaver 隨附的行為已編寫為可在現代瀏覽器中運作。雖然這些行為在舊版的瀏覽器中無法運作,但不會出現錯誤。

備註

Dreamweaver 動作已經過仔細編寫,可在盡可能多的瀏覽器中運作。如果您手動從 Dreamweaver 動作中移除程式碼,或以您自己的程式碼取代,您可能會失去跨瀏覽器相容性。

雖然 Dreamweaver 動作的編寫是為了最大化跨瀏覽器相容性,但某些瀏覽器完全不支援 JavaScript,而且許多瀏覽網頁的人會在瀏覽器中關閉 JavaScript。為了獲得最佳的跨平台結果,請提供包含在 <noscript> 標記中的替代介面,讓沒有 JavaScript 的人可以使用您的網站。

套用呼叫 JavaScript 行為

呼叫 JavaScript 行為會在事件發生時執行自訂函式或 JavaScript 程式碼行。(您可以自行編寫指令碼,或使用網頁上各種免費提供的 JavaScript 資料庫所提供的程式碼。)

選取一個物件,然後從「行為」面板的「新增行為」選單中選擇「呼叫 JavaScript」。
輸入要執行的確切 JavaScript,或輸入函式名稱。

例如,若要建立「上一步」按鈕,您可以輸入 if (history.length > 0){history.back()}。 如果您已將程式碼封裝在函式中,請僅輸入函式名稱 (例如 hGoBack())。

按一下「確定」,並確認預設事件是否正確。

套用變更屬性行為

使用「變更屬性」行為來變更物件其中一個屬性的值 (例如 div 的背景顏色或表單的動作)。

備註

只有在您對 HTML 和 JavaScript 非常熟悉的情況下才使用此行為。

選取一個物件,然後從「行為」面板的「新增行為」選單中選擇「變更屬性」。
從「元素類型」選單中,選取元素類型以顯示該類型的所有已識別元素。
從「元素 ID」選單中選取一個元素。
從「屬性」選單中選取一個屬性,或在方塊中輸入屬性名稱。
在「新值」欄位中輸入新屬性的新值。
按一下「確定」,並確認預設事件是否正確。

套用檢查外掛程式行為

使用「檢查外掛程式」行為,根據訪客是否已安裝指定的外掛程式,將他們傳送到不同的頁面。例如,您可能希望訪客在有 Shockwave 時前往一個頁面,沒有時前往另一個頁面。

備註

您無法使用 JavaScript 在 Internet Explorer 中偵測特定的外掛程式。不過,選取 Flash 或 Director 會將適當的 VBScript 程式碼新增到您的頁面,以便在 Windows 的 Internet Explorer 中偵測這些外掛程式。在 Mac OS 的 Internet Explorer 中,無法偵測外掛程式。

選取一個物件,然後從「行為」面板的「新增行為」選單中選擇「檢查外掛程式」。
從「外掛程式」選單中選取一個外掛程式,或按一下「輸入」,然後在相鄰的方塊中輸入外掛程式的確切名稱。

您必須使用 Netscape Navigator 中「關於外掛程式」頁面上以粗體指定的確切外掛程式名稱。(在 Windows 中,選取 Navigator 的「說明」>「關於外掛程式」指令;在 Mac OS 上,從 Apple 選單中選取「關於外掛程式」。)

在「如果找到,前往 URL」方塊中,為擁有外掛程式的訪客指定 URL。

如果您指定遠端 URL,則必須在位址中包含 http:// 前置詞。如果您將此欄位留空,訪客將留在同一個頁面上。

在「否則,前往 URL」方塊中,為沒有外掛程式的訪客指定替代 URL。如果您將此欄位留空,訪客將留在同一個頁面上。
如果無法偵測外掛程式時,請指定要執行的動作。 根據預設,當無法偵測時,會將訪客傳送至「否則」方塊中列出的 URL。若要改為將訪客傳送至第一個 (如果找到) URL,請選取「如果無法偵測,則一律前往第一個 URL」選項。選取此選項時,實際上意味著「假設訪客擁有外掛程式,除非瀏覽器明確指出外掛程式不存在。」一般而言,如果外掛程式內容對您的頁面不可或缺,請選取此選項;否則請保持未選取狀態。
備註

此選項僅適用於 Internet Explorer;Netscape Navigator 始終可以偵測外掛程式。

按一下「確定」,並確認預設事件是否正確。

套用拖曳 AP 元素行為

「拖曳 AP 元素」行為可讓訪客拖曳絕對定位 (AP) 元素。使用此行為 來建立拼圖、滑桿控制項和其他可移動的介面 元素。

您可以指定訪客拖曳 AP 元素的方向 (水平、垂直或任何方向)、訪客應將 AP 元素拖曳到的目標、當 AP 元素位於目標特定像素數範圍內時是否讓 AP 元素對齊至目標、AP 元素碰到目標時該如何執行等等。

由於 Drag AP Element 行為必須在訪客拖曳 AP 元素之前呼叫,您應該將 Drag AP Element 附加到 body 物件 (使用 onLoad 事件)。

選取「插入 > 版面配置物件 > AP Div」或按一下「插入」面板上的「繪製 AP Div」按鈕,然後在 「文件」視窗的「設計」檢視中繪製 AP Div。
在「文件」視窗左下角的標記選取器 中按一下 <body>
從「行為」面板的「新增行為」選單中選取「Drag AP Element」。

如果 Drag AP Element 無法使用,您可能已選取了 AP 元素。

在「AP 元素」彈出式選單中,選取「AP 元素」。
從「移動」快顯選單中選取「受限制」或「不受限制」。

非約束移動適用於拼圖和其他 拖放遊戲。對於滑桿控制項和可移動的場景(例如 檔案抽屜、窗簾和百葉窗),請選取約束移動。

對於約束移動,請在 「上」、「下」、「左」和「右」框中輸入值(以像素為單位)。

值是相對於 AP 元素的起始位置。若要將移動約束在矩形區域內,請在 四個框中都輸入正值。若要僅允許垂直移動, 請為「上」和「下」輸入正值,並為「左」和「右」輸入 0。 若要僅允許水平移動,請為「左」和「右」輸入正值,並為「上」和「下」輸入 0。

在「左」和「上」方塊中輸入值 (以像素為單位) 作為拖放目標。

拖放目標是您希望訪客將 AP 元素拖曳到的位置。當 AP 元素的左側和頂端座標符合您在「左」和「上」方塊中輸入的值時,就會被視為已到達拖放目標。值是相對於瀏覽器視窗的左上角。按一下「取得目前位置」以自動在文字方塊中填入 AP 元素的目前位置。

在「貼齊範圍內」方塊中輸入值 (以像素為單位),以決定訪客必須離放置目標多近,AP 元素才會貼齊到目標。

較大的值讓訪客更容易找到拖放目標。

對於簡單的拼圖和場景操控,您可以在此停止。若要定義 AP 元素的拖曳控制代碼、追蹤 AP 元素在拖曳時的移動,以及在放置 AP 元素時觸發動作,請按一下「進階」標籤。
若要指定訪客必須按一下 AP 元素的特定區域才能拖曳該 AP 元素,請從「拖曳控制代碼」選單中選取「元素內的區域」,然後輸入拖曳控制代碼的左側和頂端座標,以及寬度和高度。

當 AP 元素內的影像包含建議拖曳的元素 (例如標題列或抽屜把手) 時,此選項非常有用。如果您希望訪客能夠按一下 AP 元素中的任何位置來拖曳它,請勿設定此選項。

請選取您要使用的任何「拖曳時」選項:
  • 如果 AP 元素 在拖曳時應移至堆疊順序的前方,請選取「將元素移至前方」。如果您選取此選項,請使用彈出式選單 來選取是要將 AP 元素保留在前方,還是將其還原至 堆疊順序中的原始位置。

  • 在「呼叫 JavaScript」方塊中輸入 JavaScript 代碼或函數名稱 (例如 monitorAPelement()),以便在拖曳 AP 元素時重複執行代碼或函數。例如,您可以撰寫 一個函數來監視 AP 元素的座標,並在文字方塊中顯示 提示,例如「您越來越接近了」或「您離放置 目標還很遠」。

在第二個「呼叫 JavaScript」方塊中輸入 JavaScript 程式碼或函數名稱 (例如 evaluateAPelementPos()), 以便在放置 AP 元素時執行程式碼或函數。如果 JavaScript 只應在 AP 元素到達放置目標時執行,請選取「僅在貼齊時」。
按一下「確定」,並確認預設事件是否正確。

收集關於可拖曳 AP 元素的資訊

當 您將拖曳 AP 元素行為附加至物件時,Dreamweaver 會將 MM_dragLayer() 函數插入 文件的 head 區段中。(此函數保留 AP 元素的舊命名慣例 [即「圖層」],使在舊版 Dreamweaver 中建立的圖層維持可編輯狀態。)除了將 AP 元素註冊為可拖曳外, 此函數還為每個可拖曳的 AP 元素定義三個屬性 MM_LEFTRIGHTMM_UPDOWNMM_SNAPPED,您可以在自己的 JavaScript 函數中使用這些屬性來判斷 AP 元素的相對水平位置、 AP 元素的相對垂直位置,以及 AP 元素是否已到達放置目標。

備註

這裡提供的資訊僅適用於經驗豐富的 JavaScript 程式設計師。

例如,以下函數會在名為 curPosField 的表單欄位中 顯示 MM_UPDOWN 屬性的值 (AP 元素目前的垂直位置)。(表單欄位對於顯示持續更新的資訊很有用,因為它們是動態的,也就是說,您可以在頁面完成載入後變更其內容。)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

除了在表單欄位中顯示 MM_UPDOWNMM_LEFTRIGHT 的值之外,您還可以透過其他各種方式使用這些值。 例如,您可以撰寫一個函式,根據值與拖放區域的距離在表單欄位中顯示訊息,或者呼叫另一個函式來根據該值顯示或隱藏 AP 元素。

當頁面上有多個 AP 元素,且所有元素都必須到達其目標位置後,訪客才能前進到下一個頁面或任務時,讀取 MM_SNAPPED 屬性特別有用。例如,您可以撰寫一個函式來計算有多少個 AP 元素的 MM_SNAPPED 值為 true,並在每次拖放 AP 元素時呼叫它。當貼齊計數達到所需數量時,您可以將訪客傳送到下一個頁面或顯示祝賀訊息。

套用前往 URL 行為

「前往 URL」行為會在目前視窗或指定頁框中開啟新頁面。此行為對於一次點按即可變更兩個或多個頁框的內容很有用。

選取一個物件,並從「行為」面板的「加入行為」選單中選擇「前往 URL」。
從「開啟於」清單中選取 URL 的目的地。

「開啟於」清單會自動列出目前頁框集中所有頁框的名稱以及主視窗。如果沒有頁框,主視窗是唯一選項。

備註

如果任何頁框被命名為 top、blank、self 或 parent,此行為可能會產生意外結果。瀏覽器有時會將這些名稱誤認為保留的目標名稱。

按一下「瀏覽」以選取要開啟的文件,或在 URL 方塊中輸入文件的路徑和檔案名稱。
重複步驟 2 和 3,在其他頁框中開啟其他文件。
按一下「確定」,並確認預設事件是否正確。

套用跳頁選單行為

當您使用「插入 > 表單 > 跳躍選單」建立跳躍選單時,Dreamweaver 會建立選單物件並將跳躍選單 (或跳躍選單前往) 行為附加到該物件。通常不需要手動將跳躍選單行為附加到物件。

您可以透過兩種方式編輯現有的跳躍選單:

  • 您可以在「行為」面板中按兩下現有的跳躍選單行為,來編輯和重新排列選單項目、變更要跳躍到的檔案,以及變更開啟這些檔案的視窗。

  • 您可以編輯選單中的項目,就像編輯其他選單項目一樣,只需選取選單並使用「屬性」檢視器中的「清單值」按鈕即可。

如果您的文件中還沒有跳躍選單物件,請建立一個。
選取物件,然後從「行為」面板的「新增行為」選單中選擇「跳躍選單」。
在「跳躍選單」對話框中進行所需的變更,然後按一下「確定」。

套用跳頁選單前往行為

「跳轉選單 Go」行為與「跳轉選單」行為密切相關;「跳轉選單 Go」可讓您將 Go 按鈕與跳轉選單產生關聯。(使用此行為之前,文件中必須已存在跳轉選單。)按一下 Go 按鈕會開啟在跳轉選單中選取的連結。跳躍選單通常不需要執行按鈕;從跳躍選單中選取項目通常會載入 URL,不需要使用者進一步進行任何動作。但如果訪客選取跳轉選單中已選擇的相同項目,則不會發生跳轉。一般情況下,這並不重要,但如果跳轉選單出現在框架中,且跳轉選單項目連結到其他框架中的頁面,Go 按鈕通常很有用,可讓訪客重新選取跳轉選單中已選取的項目。

備註

當您將執行按鈕與跳躍選單搭配使用時,執行按鈕會成為將使用者「跳躍」至與選單中選取項目關聯 URL 的唯一機制。在跳躍選單中選取選單項目不再自動將使用者重新導向至其他頁面或框架。

選取要用作 Go 按鈕的物件 (通常是按鈕影像),然後從「行為」面板的「新增行為」選單中選擇「跳轉選單 Go」。
在「選擇跳躍選單」選單中,選取要讓執行按鈕啟動的選單,然後按一下「確定」。

套用開啟瀏覽器視窗行為

使用「開啟瀏覽器視窗」行為在新視窗中開啟頁面。您可以指定新視窗的屬性,包括其大小、屬性(是否可調整大小、是否有選單列等)和名稱。例如,當訪客按一下縮圖影像時,您可以使用此行為在個別視窗中開啟較大的影像;透過此行為,您可以讓新視窗符合影像的確切大小。

如果您未為視窗指定任何屬性,它會以開啟它的視窗大小和屬性開啟。為視窗指定任何屬性會自動關閉所有其他未明確開啟的屬性。例如,如果您未為視窗設定屬性,它可能以 1024 x 768 像素開啟,並具有導覽列(顯示「上一頁」、「下一頁」、「首頁」和「重新載入」按鈕)、位置工具列(顯示 URL)、狀態列(在底部顯示狀態訊息)和選單列(顯示「檔案」、「編輯」、「檢視」和其他選單)。如果您明確設定寬度為 640、高度為 480,且未設定其他屬性,視窗會以 640 x 480 像素開啟,不含工具列。

選取物件,然後從「行為」面板的「新增行為」選單中選擇「開啟瀏覽器視窗」。
按一下「瀏覽」來選取檔案,或輸入您要顯示的 URL。
設定視窗寬度和高度(以像素為單位)的選項,以及納入各種工具列、捲動列、調整大小控點等。為視窗命名(不使用空格或特殊字元),如果您希望它成為連結的目標或想要使用 JavaScript 控制它。
按一下「確定」,並確認預設事件是否正確。

套用彈出訊息行為

「快顯訊息」行為會顯示包含您指定訊息的 JavaScript 警報。由於 JavaScript 警報只有一個按鈕(確定),請使用此行為向使用者提供資訊,而不是提出選擇。

您可以 在文字中嵌入任何有效的 JavaScript 函數呼叫、屬性、全域變數 或其他運算式。若要嵌入 JavaScript 運算式, 請將其放在大括弧內 ({})。若要顯示大括弧, 請在前面加上反斜線 (\{)。

範例:

此頁面的 URL 是 {window.location},今天是 {new Date()}。

備註

瀏覽器 控制警報的外觀。如果您想要對 外觀有更多控制權,請考慮使用「開啟瀏覽器視窗」行為。

選取物件,然後從 「行為」面板的「新增行為」選單中選擇「彈出式訊息」。
在「訊息」方塊輸入您的訊息。
按一下「確定」,並確認預設事件是否正確。

套用預先載入影像行為

「預載影像」行為會縮短 顯示時間,方法是快取頁面 初次載入時不會顯示的影像 (例如,使用 行為或指令碼交換的影像)。

備註

「交換影像」行為會在您選取「交換影像」 對話框中的「預載影像」 選項時自動預載所有突出顯示的影像,因此使用「交換影像」時無需手動 新增「預載影像」。

選取物件,然後從 「行為」面板的「新增行為」選單中選擇「預載影像」。
按一下「瀏覽」來選取影像檔案,或在 「Image Source 檔案」框中輸入影像的路徑和檔案名稱。
按一下對話框 頂端的加號 (+) 按鈕,將影像新增至「預載影像」清單。
針對您要在目前頁面上預先載入的所有其餘影像,重複步驟 2 和 3。
若要從「預先載入影像」清單中移除影像,請選取該影像並按一下減號 (–) 按鈕。
按一下「確定」,並確認預設事件是否正確。

套用設定頁框文字行為

「設定框架文字」行為可讓您動態設定框架的文字,以您指定的內容取代框架的內容和格式。內容可包含任何有效的 HTML 程式碼。使用這個行為來動態顯示資訊。

雖然「設定框架文字」行為會取代框架的格式,但您可以選取「保留 背景顏色」來保留頁面背景和文字顏色屬性。

您可以在文字中內嵌任何有效的 JavaScript 函數呼叫、屬性、全域變數或其他表達式。若要嵌入 JavaScript 表達式, 請將其放在大括弧 ({}) 內。若要顯示大括弧, 請在前面加上反斜線 (\{)。

範例:

此頁面的 URL 為 {window.location},今天是 {new Date()}。

選取物件,並從「行為」面板的「新增行為」選單中選擇「設定文字」> 「設定框架文字」。
在「設定框架文字」對話框中,從「框架」選單 選取目標框架。
按一下「取得目前 HTML」按鈕,來拷貝目標框架 正文區段的目前內容。
在「新的 HTML」方塊中輸入訊息。
按一下「確定」,並確認預設事件是否正確。

套用「設定容器文字」 行為

「設定容器文字」行為會將頁面上現有容器(即任何可包含文字或其他元素的元素)的內容和格式,替換為您指定的內容。 這些內容可以包含任何有效的 HTML 原始碼。

您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式,請將其放置在大括弧內 ({})。若要顯示大括弧,請在前面加上反斜線 (\{)。

範例:

此頁面的 URL 為 {window.location},今天是 {new Date()}。

選取物件,然後從「行為」面板的「新增行為」選單中選取「設定文字 > 設定容器文字」。
在「設定容器文字」對話框中,使用「容器」選單來選取目標元素。
在「新的 HTML」方塊中,輸入新的文字或 HTML。
按一下「確定」,並確認預設事件是否正確。

套用「設定狀態列文字」行為

「設定狀態列文字」行為會在瀏覽器視窗左下角的狀態列中顯示訊息。例如,您可以使用此行為在狀態列中描述連結的目的地,而非顯示與其相關聯的 URL。訪客通常會忽略或忽視狀態列中的訊息(且並非所有瀏覽器都完全支援設定狀態列的文字);如果您的訊息很重要,請考慮將其顯示為彈出訊息或作為 AP 元素的文字。

備註

如果您在 Dreamweaver 中使用「設定狀態列文字」行為,則不保證瀏覽器中的狀態列文字會變更,因為某些瀏覽器在變更狀態列文字時需要特殊調整。例如,Firefox 需要您變更進階選項,以允許 JavaScript 變更狀態列文字。如需詳細資訊,請參閱瀏覽器說明文件。

您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式,請將其放置在大括弧內 ({})。若要顯示大括弧,請在前面加上反斜線 (\{)。

範例:

此頁面的 URL 為 {window.location},今天是 {new Date()}。

選取物件,然後從「行為」面板的「新增行為」選單中選擇「設定文字 > 設定狀態列文字」。
在「設定狀態列文字」對話框中,在「訊息」方塊中輸入您的訊息。

訊息要保持簡明。 如果訊息無法放入狀態列,瀏覽器會截斷該訊息。

按一下「確定」,並確認預設事件是否正確。

套用「設定文字欄位文字」行為

「設定文字欄位文字」行為會將表單文字欄位的內容替換為您指定的內容。

您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式,請將其放置在大括弧內 ({})。 若要顯示大括號,則在它前面加上反斜線 (\{)。

範例:

此頁面的 URL 為 {window.location},今天是 {new Date()}。

建立命名的文字欄位

選取「插入」>「表單」> 「文字欄位」。

如果 Dreamweaver 提示您新增 表單標記,請按一下「是」。

在「屬性」檢視窗中輸入文字欄位的名稱。 確保頁面上的名稱為唯一(不要在同一頁面上對多個元素使用相同名稱,即使它們位於不同表單中)。

套用設定文字欄位文字

選取文字欄位,並從「行為」面板的「新增行為」選單中選擇「設定文字」> 「設定欄位文字」。
從「文字欄位」選單中選取目標文字欄位 並輸入您的新文字。
按一下「確定」,並確認預設事件是否正確。

套用顯示隱藏元素行為

「顯示隱藏元素」行為可以顯示、隱藏 或還原一個或多個頁面元素的預設可見度。 此行為對於在使用者與頁面互動時顯示資訊非常實用。例如,當使用者將指標移到植物 影像上時,您可以顯示頁面元素,提供有關 植物生長季節和區域、需要多少陽光、可以 長多大等詳細資訊。此行為僅顯示或隱藏相關 元素,它並不會在隱藏時實際從頁面 流量中移除元素。

選取物件,並從「行為」面板的「新增行為」選單中選取「顯示隱藏元素」 。

如果「顯示隱藏元素」無法使用,您可能已 選取 AP 元素。因為 AP 元素不接受兩個 4.0 瀏覽器中的 事件,您必須選取不同的物件,例如 <body> 標記或連結 (<a>) 標記。

從「元素」清單中,選取您要 顯示或隱藏的元素,並按一下「顯示」、「隱藏」或「還原」(還原 預設可見度)。
對所有要變更其可見度的 剩餘元素重複步驟 2。(您可以使用單一行為變更多個元素 的可見度。)
按一下「確定」,並確認預設事件是否正確。

此行為從 Dreamweaver CS5 開始已遭取代。

套用調換影像行為

調換影像行為透過變更 <img> 標記的 src 屬性,將一個影像調換為另一個影像。使用此行為來建立按鈕滑鼠移過效果和其他影像效果(包括一次交換多個影像)。插入滾存影像會自動 在您的頁面中新增「交換影像」行為。

備註

因為此行為僅影響 src 屬性,您應該置換成與原始影像具有相同尺寸 (高度和寬度) 的影像。否則, 您交換的影像會縮小或擴大以符合 原始影像的尺寸。

還有「交換影像還原」行為, 可將上一組交換的影像還原至先前的 來源檔案。每當您將「交換影像」行為附加至物件時,就會自動新增此行為;如果您在附加「交換影像」時保持選取「還原」 選項,您應該永遠不需要 手動選取「交換影像還原」行為。

選取「插入」>「影像」或按一下 「插入」面板上的「影像」按鈕來插入影像。
在「屬性」檢視窗中,在最左邊的文字方塊中 輸入影像的名稱。

為影像命名並非必要;當您將行為附加至物件時,系統會自動為影像命名。不過,如果您事先為所有影像命名,在「交換影像」對話框中區分影像會比較容易。

重複步驟 1 和 2 來插入其他影像。
選取物件 (通常是您要交換的影像),然後從「行為」面板的「新增行為」選單中選擇「交換影像」。
從「影像」清單中,選取您要變更來源的影像。
按一下「瀏覽」以選取新的影像檔案,或在「設定來源為」方塊中輸入新影像的路徑和檔案名稱。
針對您要變更的任何其他影像重複執行步驟 5 和 6。對於要同時變更的所有影像使用相同的「交換影像」動作;否則,對應的「交換影像還原」動作將無法還原所有影像。
選取「預先載入影像」選項,可在載入頁面時快取新影像。

這樣可以避免影像出現時的下載延遲。

按一下「確定」,並確認預設事件是否正確。

套用驗證表單行為

「驗證表單」行為會檢查指定文字欄位的內容,以確保使用者已輸入正確的資料類型。將此行為附加至含有 onBlur 事件的個別文字欄位,以便在使用者填寫表單時驗證欄位,或將其附加至含有 onSubmit 事件的表單,以便在使用者按一下「提交」按鈕時同時評估多個文字欄位。將此行為附加至表單可避免提交含有無效資料的表單。

選擇「插入」>「表單」,或按一下「插入」面板中的「表單」按鈕以插入表單。
選擇「插入」>「表單」>「文字欄位」,或按一下「插入」面板中的「文字欄位」按鈕以插入文字欄位。

重複這個步驟來插入其他文字欄位。

選擇驗證方法:
  • 若要在使用者填寫表單時驗證個別欄位,請選取文字欄位並選擇「視窗」>「行為」。

  • 若要在使用者提交表單時驗證多個欄位,請按一下「文件」視窗左下角標記選擇器中的 <form> 標記,然後選擇「視窗」>「行為」。

在「增加行為」選單中選取「檢驗表單」。
請執行下列其中一項作業:
  • 如果您要驗證個別欄位,請從「欄位」清單中選取您在「文件」視窗中選取的相同欄位。

  • 如果您要驗證多個欄位,請從「欄位」清單中選取文字欄位。

如果欄位必須包含資料,請選取「必要」選項。
選取下列其中一個「接受」選項:

任何東西

檢查必要欄位是否包含資料;資料可以是任何類型。

使用電子郵件地址

檢查該欄位是否包含 @ 符號。

使用數字

檢查該欄位是否只包含數字。

使用數字從

檢查欄位是否包含特定範圍內的數字。

如果您已選擇驗證多個欄位,請針對要驗證的任何其他欄位重複執行步驟 6 和 7。
按一下「確定」。

如果您要在使用者提交表單時驗證多個欄位,onSubmit 事件會自動出現在「事件」選單中。

如果您要驗證個別欄位,請檢查預設事件是 onBluronChange。如果不是,請選取其中一個事件。

當使用者離開欄位時,這兩個事件都會觸發「驗證表單」行為。差別在於 onBlur 會發生 無論使用者是否在欄位中輸入,而 onChange 只會發生 在使用者變更欄位內容時。如果欄位是必填的,建議使用 onBlur 事件。