選取「插入 > Spry > Spry 驗證確認」。
上次更新時間
2021年4月29日
註解：
在 Dreamweaver CC 和更新版本中，Spry Widget 已由 jQuery Widget 所取代。雖然您仍可修改頁面上現有的 Spry Widget，但無法加入新的 Spry Widget。
關於驗證確認 Widget
「驗證確認」Widget 是一個文字欄位或密碼表單欄位，會在使用者輸入不符合同一張表單中類似欄位的值時顯示有效或無效狀態。例如，您可以將「驗證確認」Widget 加入至表單，要求使用者重新輸入他們在前一欄位所指定的密碼。如果使用者無法正確輸入之前指定的密碼，Widget 就會傳回一個錯誤訊息，說明這兩個值並不相符。
您也可以使用「驗證確認」Widget 搭配「驗證文字欄位」Widget 來驗證電子郵件地址。
註解：
在使用「確認」Widget 之前，請務必先熟悉「Spry 驗證」Widget。如果您不熟悉「Spry 驗證」Widget，在繼續本文之前，請先參閱使用 Spry 驗證文字欄位 Widget，或任何其他驗證 Widget 的總覽。本總覽並未介紹驗證 Widget 的所有基本概念。
下圖顯示「確認」Widget 的一般設定：
A. 密碼欄位或「Spry 密碼驗證」Widget B. 「確認」Widget
「驗證確認」Widget 包含幾種狀態 (例如有效、無效、必要等等)。您可以透過編輯對應的 CSS 檔案 (SpryValidationConfirm.css)，依照所需的驗證結果變更這些狀態的屬性。「驗證確認」Widget 可以在不同的時間點進行驗證，例如，當瀏覽者在 Widget 外按一下、鍵入資料或是嘗試送出表單等時間點。
初始化狀態
當瀏覽器載入頁面或使用者重設表單時。
焦點狀態
使用者將插入點置於 Widget 中時。
有效狀態
當使用者正確地輸入資訊且表單可以送出時。
無效狀態
當使用者輸入的文字與前面文字欄位、「驗證文字欄位」Widget 或「驗證密碼」Widget 中輸入的文字不相符。
必要狀態
當使用者沒有在文字欄位中輸入必要文字時。
如需「驗證確認」Widget 運作方式的詳細說明，以及 Widget 結構的額外資訊，請參閱：www.adobe.com/go/learn_dw_spryconfirm_tw。
插入並編輯驗證確認 Widget
插入驗證確認 Widget
-
-
完成「Input 標籤輔助功能屬性」對話框並按一下「確定」。
註解：
您也可以使用「插入」面板中的「Spry」類別來插入「驗證確認」Widget。
變更驗證確認 Widget 的必要狀態
根據預設，您以 Dreamweaver 插入的所有「驗證確認」Widget 都會在發佈於網頁時，要求使用者輸入。不過，您可以對確認文字欄位進行設定，讓使用者能夠選擇是否完成確認文字欄位。
-
請按一下藍色索引標籤，以在「文件」視窗中選取「驗證確認」Widget。
-
在「屬性」檢視窗 (「視窗 > 屬性」) 中，根據您的偏好選取或取消選取「必要」選項。
指定驗證目標的文字欄位
-
請按一下藍色索引標籤，以在「文件」視窗中選取「驗證確認」Widget。
-
在「屬性」檢視窗 (「視窗 > 屬性」) 中，自「驗證目標」彈出式選單選取一個文字欄位，即可選取您想要驗證的文字欄位。所有已指派唯一 ID 的文字欄位都會顯示為彈出式選單中的選項。
在設計檢視中顯示 Widget 狀態
-
請按一下藍色索引標籤，以在「文件」視窗中選取「驗證確認」Widget。
-
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 中，從「預覽狀態」彈出式選單中選取您要查看的狀態。例如，如果您要查看有效狀態的 Widget，請選取「有效」。
指定驗證時間
您可以指定驗證的時間，例如，當網頁瀏覽者在 Widget 外按一下、鍵入資料或是嘗試送出表單等時間點。
-
請按一下藍色索引標籤，以在「文件」視窗中選取「驗證確認」Widget。
-
在「屬性」檢視窗 (「視窗 > 屬性」) 中，選取能夠表示您要執行驗證的時間選項。您可以選取所有選項或者僅選取「送出」。
模糊
每當使用者在確認文字欄位外按一下時，即進行驗證。
變更
當使用者變更驗證文字欄位內的文字時，即進行驗證。
送出
當使用者嘗試送出表單時，即進行驗證。預設是選取「送出」選項，而且無法取消選取。
自訂確認 Widget
「屬性」檢視窗可讓您對「驗證確認」Widget 進行簡單的編輯，但不支援自訂的樣式設計工作。您可以變更「驗證確認」Widget 的 CSS，這樣就能依照您所喜愛的樣式建立 Widget。如需樣式設計工作的進階清單，請參閱：www.adobe.com/go/learn_dw_spryconfirm_custom_tw。
下列主題中的所有 CSS 規則都是指 SpryValidationConfirm.css 檔案中的預設規則。每當您建立 Spry 驗證確認 Widget 時，Dreamweaver 都會將 SpryValidationConfirm.css 檔案儲存在網站的 SpryAssets 資料夾中。這個檔案相當實用，其中包含 Widget 所適用各種樣式的註解資訊，方便您查詢相關資訊。
註解：
您可以輕鬆地在隨附的 CSS 檔案中直接編輯「驗證確認」Widget 的規則，也可以使用「CSS 樣式」面板來編輯 Widget 的 CSS。「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別，在您使用面板的「目前」模式時，特別有用。
設計驗證確認 Widget 的樣式 (一般說明)
-
開啟 SpryValidationConfirm.css 檔案。
-
找到 Widget 中想要變更之部分的 CSS 規則。例如，若要變更「確認」Widget 的背景顏色，請編輯 SpryValidationConfirm.css 檔案中的 input.confirmRequiredState 規則。
-
對 CSS 進行所需的變更並儲存檔案。
SpryValidationConfirm.css 檔案中包含大量的註解，這些註解會解釋程式碼與某些規則的目的。如需進一步的資訊，請參閱檔案中的註解。
設計驗證確認 Widget 錯誤訊息文字
根據預設，「驗證確認」Widget 的錯誤訊息會以紅色文字呈現，文字周圍環繞著 1 像素的實心邊框。
-
若要變更「驗證確認」Widget 錯誤訊息的文字樣式，請使用下表找出適合的 CSS 規則，然後變更預設屬性，或者新增您自己的文字樣式屬性和值。
要變更的文字
相關的 CSS 規則
要變更的相關屬性
錯誤訊息文字
.confirmRequiredState .confirmRequiredMsg、.confirmInvalidState .confirmInvalidMsg color: #CC3333; border: 1px solid #CC3333;
變更驗證確認 Widget 背景顏色
-
若要變更「驗證確認」Widget 在各種狀態下的背景顏色，請使用下表找出適合的 CSS 規則，然後變更預設的背景顏色值。
要變更的顏色
相關的 CSS 規則
要變更的相關屬性
Widget 在有效狀態下的背景顏色
.confirmValidState input、input.confirmValidState background-color: #B8F5B1;
Widget 在無效狀態下的背景顏色
input.confirmRequiredState、.confirmRequiredState input、input.confirmInvalidState、.confirmInvalidState input background-color: #FF9F9F;
Widget 成為焦點時的背景顏色
.confirmFocusState input、input.confirmFocusState background-color: #FFFFCC;
