註解:

在 Dreamweaver CC 和更新版本中,Spry Widget 已由 jQuery Widget 所取代。雖然您仍可修改頁面上現有的 Spry Widget,但無法加入新的 Spry Widget。

關於驗證文字區域 Widget

Spry 驗證文字區域 Widget 是一種文字區域,會在使用者輸入幾個句子之後,顯示有效或無效狀態。如果文字區域是必要欄位,而使用者未輸入任何文字,Widget 就會傳回訊息,指出需要一個值。

下列範例顯示各種狀態中的驗證文字區域 Widget:

各種狀態中的驗證文字區域 Widget
各種狀態中的驗證文字區域 Widget

A. 剩餘字元計數器 B. 文字區域 Widget (具有焦點、最大字元數目狀態) C. 文字區域 Widget (具有焦點、有效狀態) D. 文字區域 Widget (必要狀態) E. 已輸入字元計數器 

驗證文字區域 Widget 包含幾種狀態 (例如有效、無效、必要的值等等)。您可以依照所需要的驗證結果,使用「屬性」檢視窗來變更這些狀態的屬性。驗證文字區域 Widget 可以在不同的時間點進行驗證,例如,當使用者在 Widget 外按一下、鍵入資料或是嘗試送出表單等時間點。

初始化狀態

頁面載入瀏覽器或使用者重設表單時的 Widget 狀態。

焦點狀態

使用者將插入點置於 Widget 時的 Widget 狀態。

有效狀態

使用者輸入正確資訊且表單可以送出時的 Widget 狀態。

必要狀態

使用者未輸入任何文字時的 Widget 狀態。

最小字元數目狀態

使用者在文字區域中輸入的字元,少於最小必要字元數目時的 Widget 狀態。

最大字元數目狀態

使用者在文字區域中輸入的字元,多於最大允許字元數目時的 Widget 狀態。

每當驗證文字區域 Widget 因使用者互動而進入上述任何一個狀態時,Spry 架構邏輯就會在執行階段,將特定的 CSS 類別套用至 Widget 的 HTML 容器。例如,如果使用者嘗試送出表單,但未在文字區域內輸入文字,Spry 就會套用類別至 Widget,使其顯示錯誤訊息:「需要有一個值」。用來控制樣式並顯示錯誤訊息狀態的規則,存在於 Widget 的 CSS 檔案中,即 SpryValidationTextArea.css。

驗證文字區域 Widget 的預設 HTML 通常位於表單內,是由圍繞著文字區域之 <textarea> 標籤的容器 <span> 標籤所組成。驗證文字區域 Widget 的 HTML 也包含位於文件頁首和 Widget 之 HTML 標記後面的 Script 標籤。

如需驗證文字區域 Widget 運作方式的詳細說明,包括驗證文字區域 Widget 程式碼的完整分析,請參閱 www.adobe.com/go/learn_dw_sprytextarea_tw

插入並編輯驗證文字區域 Widget

插入驗證文字區域 Widget

  1. 選取「插入 > Spry > Spry 驗證文字區域」。
  2. 完成「輸入標籤輔助功能屬性」對話框並按一下「確定」。

註解:

您也可以使用「插入」面板中的「Spry」類別來插入驗證文字區域 Widget。

指定驗證時間

您可以指定驗證的時間,例如,當使用者在 Widget 外按一下、鍵入資料或是嘗試送出表單等時間點。

  1. 在「文件」視窗中選取驗證文字區域 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,選取能夠表示執行驗證時間的「驗證於」選項。您可以選取所有選項或者僅選取「送出」。

    模糊

    每當使用者在文字欄位外按一下時,即進行驗證。

    變更

    當使用者變更文字欄位內的文字時,即進行驗證。

    送出

    當使用者嘗試送出表單時,即進行驗證。預設是選取「送出」選項,而且無法取消選取。

指定最小與最大字元數

  1. 在「文件」視窗中選取驗證文字區域 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,在「最小字元數」或「最大字元數」方塊中輸入數字。例如,如果您在「最小字元數」方塊中輸入 20,Widget 只會驗證使用者是否在文字區域中輸入 20 個或以上的字元。

新增字元計數器

您可以新增字元計數器,讓使用者在輸入文字至文字區域時,能夠知道已經鍵入幾個字元,或是還能鍵入多少字元。根據預設,當您新增字元計數器時,計數器會出現在 Widget 外側右下角位置。

  1. 在「文件」視窗中選取驗證文字區域 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,選取「字元計數」或「剩餘的字元」選項。

    註解:

    您必須先設定最大允許字元數目,才能使用「剩餘的字元」選項。

在設計檢視中顯示 Widget 狀態

  1. 在「文件」視窗中選取驗證文字區域 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,從「預覽狀態」彈出式選單中選取您要查看的狀態。例如,如果您要查看有效狀態的 Widget,請選取「有效」。

變更文字區域的必要狀態

根據預設,您以 Dreamweaver 插入的所有驗證文字區域 Widget 都會在發佈於網頁時,要求使用者輸入。不過,您可以對文字區域進行設定,選擇是否進行驗證。

  1. 在「文件」視窗中選取驗證文字區域 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,根據您的偏好選取或取消選取「必要」選項。

建立文字區域的提示

您可以新增提示至文字區域 (例如,「請在此鍵入您的描述」),讓使用者知道應該在文字區域中輸入何種資訊。文字區域會在使用者將網頁載入至瀏覽器時顯示提示文字。

  1. 在「文件」視窗中選取驗證文字區域 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,在「提示」文字方塊中輸入提示。

封鎖額外字元

您可以避免使用者在驗證文字區域 Widget 中,輸入大於最大允許字元數目的字元。例如,如果您針對設定為最多只能接受 20 個字元的 Widget 選取這個選項,使用者就無法在文字區域中,鍵入 20 個以上的字元。

  1. 在「文件」視窗中選取驗證文字區域 Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,選取「封鎖額外字元」選項。

自訂驗證文字區域 Widget

「屬性」檢視窗可讓您對驗證文字區域 Widget 進行簡單的編輯,但不支援自訂的樣式設計工作。您可以變更驗證文字區域 Widget 的 CSS,這樣就能依照您所喜愛的樣式建立 Widget。如需樣式設計工作的進階清單,請參閱 www.adobe.com/go/learn_dw_sprytextarea_custom_tw

下列主題中的所有 CSS 規則都是指 SpryValidationTextArea.css 檔案中的預設規則。每當您建立 Spry 驗證文字區域 Widget 時,Dreamweaver 都會將 SpryValidationTextArea.css 檔案儲存在網站的 SpryAssets 資料夾中。這個檔案相當實用,其中包含 Widget 所適用各種樣式的註解資訊,方便您查詢相關資訊。

註解:

您可以輕鬆地在隨附的 CSS 檔案中直接編輯驗證文字區域 Widget 的規則,也可以使用「CSS 樣式」面板來編輯 Widget 的 CSS。「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別,在您使用面板的「目前」模式時,特別有用。

設計驗證文字區域 Widget 錯誤訊息文字

根據預設,驗證文字區域 Widget 的錯誤訊息會以紅色文字呈現,文字周圍環繞著 1 像素的邊框。

  1. 若要變更驗證文字區域 Widget 錯誤訊息的文字樣式,請使用下表找出適合的 CSS 規則,然後變更預設屬性,或者新增您自己的文字樣式屬性和值:

    要變更的文字

    相關的 CSS 規則

    要變更的相關屬性

    錯誤訊息文字

    .textareaRequiredState .textareaRequiredMsg、.textareaMinCharsState .textareaMinCharsMsg、.textareaMaxCharsState .textareaMaxCharsMsg

    color: #CC3333; border: 1px solid #CC3333;

變更驗證文字區域 Widget 背景顏色

  1. 若要變更驗證文字區域 Widget 在各種狀態下的背景顏色,請使用下表找出適合的 CSS 規則,然後變更預設的背景顏色值:

    要變更的背景顏色

    相關的 CSS 規則

    要變更的相關屬性

    Widget 在有效狀態下的背景顏色

    .textareaValidState textarea、textarea.textareaValidState

    background-color: #B8F5B1;

    Widget 在無效狀態下的背景顏色

    textarea.textareaRequiredState、.textareaRequiredState textarea、textarea.textareaMinCharsState、.textareaMinCharsState textarea、textarea.textareaMaxCharsState、.textareaMaxCharsState textarea

    background-color: #FF9F9F;

    Widget 成為焦點時的背景顏色

    .textareaFocusState textarea、textarea.textareaFocusState

    background-color: #FFFFCC;

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策