在 Dreamweaver 中使用 Spry 驗證選項按鈕群組 Widget

搜尋

上次更新時間

註解：

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

關於驗證選項按鈕群組 Widget

「驗證選項按鈕群組」Widget 是一組選項按鈕，可為選取範圍提供驗證支援。此 Widget 會從群組中強制選取 1 個選項按鈕。

下列範例顯示各種狀態中的「驗證選項按鈕群組」Widget：

A. 「驗證選項按鈕群組」Widget 錯誤訊息 B. 「驗證選項按鈕群組」Widget 群組

「驗證選項按鈕群組」Widget 除了初始狀態之外，還包含另外 3 種狀態：有效、無效以及必要的值。您可以透過編輯對應的 CSS 檔案 (SpryValidationRadio.css)，依照所需的驗證結果變更這些狀態的屬性。「驗證選項按鈕群組」Widget 可以在不同的時間點進行驗證：當使用者在 Widget 外按一下、進行選取或是嘗試送出表單等時間點。

初始化狀態

當瀏覽器載入頁面或使用者重設表單時。

有效狀態

當使用者做出選取且表單可以送出時。

必要狀態

當使用者沒有做出必要的選取時。

無效狀態

當使用者選取其值不被接受的選項按鈕時。

每當「驗證選項按鈕群組」Widget 因使用者互動而進入上述任何一個狀態時，Spry 架構邏輯就會在執行階段，將特定的 CSS 類別套用至 Widget 的 HTML 容器。例如，如果使用者嘗試送出表單，但未進行任何選取，Spry 就會套用類別至 Widget，使其顯示錯誤訊息：「請進行選取」。用來控制樣式並顯示錯誤訊息狀態的規則，存在於 Widget 的檔案中，即 SpryValidationRadio.css。

「驗證選項按鈕群組」Widget 的預設 HTML 程式碼 (通常位於表單中) 是由一個容器 span 標籤所構成，這個標籤圍繞著選項按鈕群組的 input type="radio" 標籤。「驗證選項按鈕群組」Widget 的 HTML 程式碼也包含位於文件頁首和 Widget 之 HTML 程式碼後面的 Script 標籤。

如需驗證選項按鈕群組 Widget 運作方式的詳細說明，包括驗證選項按鈕群組 Widget 程式碼的完整分析，請參閱：www.adobe.com/go/learn_dw_spryradio_tw。

插入並編輯驗證選項按鈕群組 Widget

插入驗證選項按鈕群組 Widget

選取「插入 > Spry > Spry 驗證選項按鈕群組」。
在「名稱」文字方塊中，輸入選項按鈕群組的名稱。
按一下加 (+) 或減 (-) 按鈕，就可以在群組中增加或減少選項按鈕。
在「標籤」欄中，按一下每個選項按鈕的名稱，使其成為可編輯欄位，並為每個選項按鈕指定唯一名稱。
在「值」欄中，按一下每個選項按鈕的值，使其成為可編輯欄位，並為每個選項按鈕指定唯一值。
(選擇性) 按一下選項按鈕或其值來選取特定列，然後按一下向上鍵或向下鍵將該列向上或向下移動。
選取選項按鈕群組的版面類型。

斷行

使用斷行符號 (br 標籤)，將各個選項按鈕置放在不同行中。

表格

使用個別表格列 (tr 標籤)，將各個選項按鈕置放在不同行中。
按一下「確定」。

註解：

您也可以使用「插入」面板中的「Spry」類別來插入「選項按鈕群組」Widget。

指定驗證時間

您可以指定驗證的時間，例如，當使用者在 Widget 外按一下、進行選取或是嘗試送出表單等時間點。

請按一下藍色索引標籤，以在「文件」視窗中選取「驗證選項按鈕群組」Widget。
在「屬性」檢視窗 (「視窗 > 屬性」) 中，選取能夠表示您要執行驗證的時間選項。您可以選取所有選項或者僅選取「送出」。

模糊

每當使用者在選項按鈕群組外按一下時，即進行驗證。

變更

當使用者選取項目時，即進行驗證。

送出

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

在設計檢視中顯示 Widget 狀態

請按一下藍色索引標籤，以在「文件」視窗中選取「驗證選項按鈕群組」Widget。
在「屬性」檢視窗 (「視窗 > 屬性」) 中，從「預覽狀態」彈出式選單中選取您要查看的狀態。例如，選取「初始化」即可查看 Widget 的初始化狀態。

變更選項按鈕的必要狀態

根據預設，「驗證選項按鈕群組」Widget 會要求使用者在送出表單之前進行選取。然而，您能夠將選項設定為可供使用者選擇性選取的項目。

請按一下藍色索引標籤，以在「文件」視窗中選取「驗證選項按鈕群組」Widget。
在「屬性」檢視窗 (「視窗 > 屬性」) 中，取消選取「必要」選項。

指定空值或無效值

您能夠為選項按鈕指定空值或無效值，如果使用者選取了任何一個與這些值關聯的選項按鈕時，便會登錄為空或無效。如果使用者選取具有空值的選項按鈕，瀏覽器會傳回錯誤訊息：「請進行選取」。如果使用者選取具有無效值的選項按鈕，瀏覽器會傳回錯誤訊息：「請選取有效的值」。

在「選項按鈕群組」Widget 中選取您想要用於空值或無效值的選項按鈕。在為 Widget 指定空值或無效值之前，必須先將這些值指定給對應的選項按鈕。
在「選項按鈕屬性」檢視窗 (「視窗 > 屬性) 中，將選項按鈕指定給核取值。若要建立具有空值的選項按鈕，請在「核取的值」文字方塊中輸入 none。若要建立具有無效值的選項按鈕，請在「核取的值」文字方塊中輸入 invalid。
在「驗證選項按鈕群組」Widget 的藍色索引標籤上按一下，以選取整個 Widget。
在「屬性」檢視窗中，指定為空值或無效值。若要建立能夠顯示空值錯誤訊息「請進行選取」的 Widget，請在「空值」文字方塊中輸入 none。若要建立能夠顯示空值錯誤訊息「請選取有效的值」的 Widget，請在「無效值」文字方塊中輸入 invalid。

請務必記住，您必須為選項按鈕本身與「選項按鈕群組」Widget 指派 none 值或 invalid 值，錯誤訊息才能正常顯示。

自訂選項按鈕群組 Widget

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

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

註解：

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

設計驗證選項按鈕群組 Widget 的樣式 (一般說明)

開啟 SpryValidationRadio.css 檔案。
找到 Widget 中想要變更之部分的 CSS 規則。例如，若要變更「選項按鈕群組」Widget 的背景顏色，請編輯 SpryValidationRadio.css 檔案中的 radioRequiredState 規則。
對 CSS 規則進行所需的變更並儲存檔案。

SpryValidationRadio.css 檔案中包含大量的註解，這些註解會解釋程式碼與某些規則的目的。如需進一步的資訊，請參閱檔案中的註解。

設計驗證選項按鈕群組 Widget 錯誤訊息文字

根據預設，「驗證選項按鈕群組」Widget 的錯誤訊息會以紅色文字呈現，文字周圍環繞著 1 像素的實心邊框。

若要變更「驗證選項按鈕群組」Widget 錯誤訊息的文字樣式，請使用下表找出適合的 CSS 規則，然後變更預設屬性，或者新增您自己的文字樣式屬性和值。

要設計樣式的文字	相關的 CSS 規則	要變更的相關屬性
錯誤訊息文字	.radioRequiredState .radioRequiredMsg、.radioInvalidState .radioInvalidMsg	color: #CC3333; border: 1px solid #CC3333;