選取「插入＞Spry＞Spry 驗證選取」。
上次更新時間
Apr 29, 2021 03:59:54 PM GMT
註解：
在 Dreamweaver CC 和更新版本中，Spry Widget 已由 jQuery Widget 所取代。雖然您仍可修改頁面上現有的 Spry Widget，但無法加入新的 Spry Widget。
關於驗證選取 Widget
Spry 驗證選取 Widget 是一種下拉式選單，會在使用者進行選取時，顯示有效或無效狀態。例如，您可以插入內含狀態清單的「驗證選取」Widget，而這些狀態會分組至不同區段且以水平線隔開。如果使用者意外選取相對於這些狀態之一的分隔線，則驗證選取 Widget 會傳回訊息至使用者，說明其選取的項目無效。
下列範例顯示展開的驗證選取 Widget，以及 Widget 在各種狀態下的收合形式：
A. 驗證選取 Widget (具有焦點) B. 選取 Widget (有效狀態) C. 選取 Widget (必要狀態) D. 選取 Widget (無效狀態)
驗證選取 Widget 包含幾種狀態 (例如有效、無效、必要的值等等)。您可以依照所需要的驗證結果，使用「屬性」檢視窗來變更這些狀態的屬性。驗證選取 Widget 可以在不同的時間點進行驗證，例如，當使用者在 Widget 外按一下、進行選取或是嘗試送出表單等時間點。
初始化狀態
頁面載入瀏覽器或使用者重設表單時的 Widget 狀態。
焦點狀態
使用者按一下 Widget 時的 Widget 狀態。
有效狀態
使用者選取有效項目且表單可以送出時的 Widget 狀態。
無效狀態
使用者選取無效項目時的 Widget 狀態。
必要狀態
使用者未選取有效項目時的 Widget 狀態。
每當驗證選取 Widget 因使用者互動而進入上述任何一個狀態時，Spry 架構邏輯就會在執行階段，將特定的 CSS 類別套用至 Widget 的 HTML 容器。例如，如果使用者嘗試送出表單，但未從選單選取項目，Spry 就會套用類別至 Widget，使其顯示錯誤訊息：「請選取項目」。用來控制樣式並顯示錯誤訊息狀態的規則，存在於 Widget 的 CSS 檔案中，即 SpryValidationSelect.css。
驗證選取 Widget 的預設 HTML 通常位於表單內，是由圍繞著文字區域之 <select> 標籤的容器 <span> 標籤所組成。驗證選取 Widget 的 HTML 也包含位於文件頁首和 Widget 之 HTML 標記後面的 Script 標籤。
如需驗證選取 Widget 運作方式的詳細說明，包括驗證選取 Widget 程式碼的完整分析，請參閱 www.adobe.com/go/learn_dw_spryselect_tw。
插入並編輯驗證選取 Widget
插入驗證選取 Widget
-
-
完成「輸入標籤輔助功能屬性」對話框並按一下「確定」。
-
在「程式碼」檢視中，新增含有選單項目和值的選項標籤。Dreamweaver 不會自動為您執行這項作業。如需詳細資訊，請參閱前述主題。
註解：
您也可以使用「插入」面板中的「Spry」類別來插入驗證選取 Widget。
指定驗證時間
您可以指定驗證的時間，例如，當使用者在 Widget 外按一下、鍵入資料或是嘗試送出表單等時間點。
-
在「文件」視窗中選取驗證選取 Widget。
-
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 中，選取能夠表示您要執行驗證的時間選項。您可以選取所有選項或者僅選取「送出」。
模糊
每當使用者在 Widget 外按一下時，即進行驗證。
變更
當使用者選取項目時，即進行驗證。
送出
當使用者嘗試送出表單時，即進行驗證。預設是選取「送出」選項，而且無法取消選取。
在設計檢視中顯示 Widget 狀態
-
在「文件」視窗中選取驗證選取 Widget。
-
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 中，從「預覽狀態」彈出式選單中選取您要查看的狀態。例如，如果您要查看有效狀態的 Widget，請選取「有效」。
禁止或允許空白值
根據預設，您以 Dreamweaver 插入的所有驗證選取 Widget 都會在 Widget 發佈於網頁時，要求使用者選取具有相關聯值的選單項目。不過，您可以停用這個選項。
-
在「文件」視窗中選取驗證選取 Widget。
-
在「屬性」檢視窗 (「視窗 > 屬性」) 中，根據您的偏好選取或取消選取「不允許空白值」選項。
指定無效值
您可以指定某個值，當使用者選取與這個值相關聯的選單項目時，將被視為無效。例如，如果您指定 - 1 代表無效值，並且將此值指定給選項標籤，則 Widget 將會在使用者選取該選單項目時傳回錯誤訊息。
<option value="-1"> ------------------- </option>
-
在「文件」視窗中選取驗證選取 Widget。
-
在「屬性」檢視窗 (「視窗 > 屬性」) 中，在「無效值」方塊中輸入要做為無效值的數字。
自訂驗證選取 Widget
「屬性」檢視窗可讓您對驗證選取 Widget 進行簡單的編輯，但不支援自訂的樣式設計工作。您可以變更驗證選取 Widget 的 CSS，這樣就能依照您所喜愛的樣式建立 Widget。
下列主題中的所有 CSS 規則都是指 SpryValidationSelect.css 檔案中的預設規則。每當您建立 Spry 驗證選取 Widget 時，Dreamweaver 都會將 SpryValidationSelect.css 檔案儲存在網站的 SpryAssets 資料夾中。這個檔案相當實用，其中包含 Widget 所適用各種樣式的註解資訊，方便您查詢相關資訊。
註解：
您可以輕鬆地在隨附的 CSS 檔案中直接編輯驗證選取 Widget 的規則，也可以使用「CSS 樣式」面板來編輯 Widget 的 CSS。「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別，在您使用面板的「目前」模式時，特別有用。
設計驗證選取 Widget 錯誤訊息文字
根據預設，驗證選取 Widget 的錯誤訊息會以紅色文字呈現，文字周圍環繞著 1 像素的邊框。
-
若要變更驗證選取 Widget 錯誤訊息的文字樣式，請使用下表找出適合的 CSS 規則，然後變更預設屬性，或者新增您自己的文字樣式屬性和值：
要設計樣式的文字
相關的 CSS 規則
要變更的相關屬性
錯誤訊息文字
.selectRequiredState .selectRequiredMsg、.selectInvalidState .selectInvalidMsg color: #CC3333; border: 1px solid #CC3333;
變更驗證選取 Widget 背景顏色
-
若要變更驗證選取 Widget 在各種狀態下的背景顏色，請使用下表找出適合的 CSS 規則，然後變更預設的背景顏色值：
要變更的背景顏色
相關的 CSS 規則
要變更的相關屬性
Widget 在有效狀態下的背景顏色
.selectValidState select、select.selectValidState background-color: #B8F5B1;
Widget 在無效狀態下的背景顏色
select.selectRequiredState、.selectRequiredState select、select.selectInvalidState、.selectInvalidState select background-color: #FF9F9F;
Widget 成為焦點時的背景顏色
.selectFocusState select、select.selectFocusState background-color: #FFFFCC;
更多類似項目
登入您的帳戶