選取「插入 > Spry > Spry 驗證密碼」。
上次更新時間
2021年4月29日
註解：
在 Dreamweaver CC 和更新版本中，Spry Widget 已由 jQuery Widget 所取代。雖然您仍可修改頁面上現有的 Spry Widget，但無法加入新的 Spry Widget。
關於驗證密碼 Widget
「Spry 驗證密碼」Widget 是可以用來強制執行密碼規則 (例如字元的數目與類型等密碼規則) 的密碼文字欄位。這個 Widget 會根據使用者的輸入，提供警告或錯誤訊息。
註解：
在使用「密碼」Widget 之前，請務必先熟悉「Spry 驗證」Widget。如果您不熟悉「Spry 驗證」Widget，在繼續本文之前，請先參閱使用 Spry 驗證文字欄位 Widget，或任何其他驗證 Widget 的總覽。本總覽並未介紹驗證 Widget 的所有基本概念。
下列範例顯示各種狀態中的「驗證密碼」Widget：
A. 密碼 Widget (最小字元數目狀態) B. 密碼 Widget (最大字元數目狀態) C. 密碼 Widget (必要狀態)
「驗證密碼」Widget 包含幾種狀態 (例如有效、必要、最小字元數目等等)。您可以透過編輯對應的 CSS 檔案 (SpryValidationPassword.css)，依照所需的驗證結果變更這些狀態的屬性。「驗證密碼」Widget 可以在不同的時間點進行驗證，例如，當網站瀏覽者在文字欄位外按一下、鍵入資料或是嘗試送出表單等時間點。
初始化狀態
當瀏覽器載入頁面或使用者重設表單時。
焦點狀態
使用者將插入點置於 Widget 中時。
有效狀態
當使用者正確地輸入資訊且表單可以送出時。
強度無效狀態
當使用者輸入的文字不符合密碼文字欄位的強度準則時 (例如，當您指定密碼必須包含至少 2 個大寫字母，但輸入的密碼卻完全沒有包含任何大寫字母或僅包含 1 個大寫字母)。
必要狀態
當使用者沒有在文字欄位中輸入必要文字時。
最小字元數目狀態
當使用者的輸入少於密碼文字欄位中所要求的字元數目最小值。
最大字元數目狀態
當使用者的輸入超過密碼文字欄位中允許的字元數目最大值。
如需「驗證密碼」Widget 運作方式的詳細說明，以及 Widget 結構的額外資訊，請參閱：www.adobe.com/go/learn_dw_sprypassword_tw。
插入並編輯驗證密碼 Widget
插入驗證密碼 Widget
-
-
完成「Input 標籤輔助功能屬性」對話框並按一下「確定」。
註解：
您也可以使用「插入」面板中的「Spry」類別來插入「驗證密碼」Widget。
變更驗證密碼 Widget 的必要狀態
根據預設，您以 Dreamweaver 插入的所有「驗證密碼」Widget 都會在發佈於網頁時，要求使用者輸入。不過，您可以對密碼文字欄位進行設定，讓使用者能夠選擇是否完成密碼文字欄位。
-
請按一下藍色索引標籤，以在「文件」視窗中選取「驗證密碼」Widget。
-
在「屬性」檢視窗 (「視窗 > 屬性」) 中，根據您的偏好選取或取消選取「必要」選項。
在設計檢視中顯示 Widget 狀態
-
請按一下藍色索引標籤，以在「文件」視窗中選取「驗證密碼」Widget。
-
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 中，從「預覽狀態」彈出式選單中選取您要查看的狀態。例如，如果您要查看有效狀態的 Widget，請選取「有效」。
指定驗證時間
您可以指定驗證的時間，例如，當網頁瀏覽者在 Widget 外按一下、鍵入資料或是嘗試送出表單等時間點。
-
請按一下藍色索引標籤，以在「文件」視窗中選取「驗證密碼」Widget。
-
在「屬性」檢視窗 (「視窗 > 屬性」) 中，選取能夠表示您要執行驗證的時間選項。您可以選取所有選項或者僅選取「送出」。
模糊
每當使用者在密碼文字欄位外按一下時，即進行驗證。
變更
當使用者變更密碼文字欄位內的文字時，即進行驗證。
送出
當使用者嘗試送出表單時，即進行驗證。預設是選取「送出」選項，而且無法取消選取。
設定密碼強度
密碼強度指的是某些字元組合符合密碼文字欄位需求的程度。例如，如果您建立了一個讓使用者選取密碼的表單，您可能會想強迫使用者在密碼中加入特定數目的大寫字母、特定數目的特殊字元等等。
註解：
根據預設，「密碼」Widget 沒有設定任何可用的選項。
按一下「驗證密碼」Widget 的藍色索引標籤進行選取。
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 中，依照需求設定選項。您在選項欄位中輸入的數字就是 Widget 驗證的必要數字。例如，當您在「字元數最小值」方塊中輸入 8 時，只有使用者在密碼文字欄位中輸入至少 8 個字元的情況下，Widget 才會進行驗證。
字元數最小值/最大值
指定有效密碼所需的字元數最小值與最大值。
字母數最小值/最大值
指定有效密碼所需的字母 (a、b、c 等等) 數最小值與最大值。
數字數最小值/最大值
指定有效密碼所需的數字 (1、2、3 等等) 數最小值與最大值。
大寫字母數最小值/最大值
指定有效密碼所需的大寫字母 (A、B、C 等等) 數最小值與最大值。
特殊字元數最小值/最大值
指定有效密碼所需的特殊字元 (!、@、# 等等) 數最小值與最大值。
將上述任何選項留白會導致 Widget 不會針對該準則進行驗證。例如，如果您將「數字數最小值/最大值」選項留白，Widget 就不會尋找密碼字串中的數字。
自訂驗證密碼 Widget
「屬性」檢視窗可讓您對「驗證密碼」Widget 進行簡單的編輯，但不支援自訂的樣式設計工作。您可以變更「驗證密碼」Widget 的 CSS，這樣就能依照您所喜愛的樣式建立 Widget。如需樣式設計工作的進階清單，請參閱 www.adobe.com/go/learn_dw_sprypassword_custom_tw。
下列主題中的所有 CSS 規則都是指 SpryValidationPassword.css 檔案中的預設規則。每當您建立 Spry 驗證密碼 Widget 時，Dreamweaver 都會將 SpryValidationPassword.css 檔案儲存在網站的 SpryAssets 資料夾中。這個檔案相當實用，其中包含 Widget 所適用各種樣式的註解資訊，方便您查詢相關資訊。
註解：
您可以輕鬆地在隨附的 CSS 檔案中直接編輯「驗證密碼」Widget 的規則，也可以使用「CSS 樣式」面板來編輯 Widget 的 CSS。「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別，在您使用面板的「目前」模式時，特別有用。
設計驗證密碼 Widget 的樣式 (一般說明)
-
開啟 SpryValidationPassword.css 檔案。
-
找到 Widget 中想要變更之部分的 CSS 規則。例如，若要變更「密碼」Widget 的背景顏色，請編輯 SpryValidationPassword.css 檔案中的 input.passwordRequiredState 規則。
-
對 CSS 進行所需的變更並儲存檔案。
SpryValidationPassword.css 檔案中包含大量的註解，這些註解會解釋程式碼與某些規則的目的。如需進一步的資訊，請參閱檔案中的註解。
設計驗證密碼 Widget 錯誤訊息文字
根據預設，「驗證密碼」Widget 的錯誤訊息會以紅色文字呈現，文字周圍環繞著 1 像素的實心邊框。
-
若要變更「驗證密碼」Widget 錯誤訊息的文字樣式，請使用下表找出適合的 CSS 規則，然後變更預設屬性，或者新增您自己的文字樣式屬性和值。
要變更的文字
相關的 CSS 規則
要變更的相關屬性
錯誤訊息文字
.passwordRequiredState .passwordRequiredMsg、.passwordMinCharsState .passwordMinCharsMsg、.passwordMaxCharsState .passwordMaxCharsMsg、.passwordInvalidStrengthState .passwordInvalidStrengthMsg、.passwordCustomState .passwordCustomMsg color: #CC3333; border: 1px solid #CC3333;
變更驗證密碼 Widget 背景顏色
-
若要變更「驗證密碼」Widget 在各種狀態下的背景顏色，請使用下表找出適合的 CSS 規則，然後變更預設的背景顏色值。
要變更的顏色
相關的 CSS 規則
要變更的相關屬性
Widget 在有效狀態下的背景顏色
.passwordValidState input、input.passwordValidState background-color: #B8F5B1;
Widget 在無效狀態下的背景顏色
input.passwordRequiredState、.passwordRequiredState input、input.passwordInvalidStrengthState、.passwordInvalidStrengthState input、input.passwordMinCharsState、.passwordMinCharsState input、input.passwordCustomState、.passwordCustomState input、input.passwordMaxCharsState、.passwordMaxCharsState input background-color: #FF9F9F;
Widget 成為焦點時的背景顏色
.passwordFocusState input、input.passwordFocusState background-color: #FFFFCC;
