註解:

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

關於驗證密碼 Widget

「Spry 驗證密碼」Widget 是可以用來強制執行密碼規則 (例如字元的數目與類型等密碼規則) 的密碼文字欄位。這個 Widget 會根據使用者的輸入,提供警告或錯誤訊息。

註解:

在使用「密碼」Widget 之前,請務必先熟悉「Spry 驗證」Widget。如果您不熟悉「Spry 驗證」Widget,在繼續本文之前,請先參閱使用 Spry 驗證文字欄位 Widget,或任何其他驗證 Widget 的總覽。本總覽並未介紹驗證 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

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

註解:

您也可以使用「插入」面板中的「Spry」類別來插入「驗證密碼」Widget。

變更驗證密碼 Widget 的必要狀態

根據預設,您以 Dreamweaver 插入的所有「驗證密碼」Widget 都會在發佈於網頁時,要求使用者輸入。不過,您可以對密碼文字欄位進行設定,讓使用者能夠選擇是否完成密碼文字欄位。

  1. 請按一下藍色索引標籤,以在「文件」視窗中選取「驗證密碼」Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,根據您的偏好選取或取消選取「必要」選項。

在設計檢視中顯示 Widget 狀態

  1. 請按一下藍色索引標籤,以在「文件」視窗中選取「驗證密碼」Widget。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,從「預覽狀態」彈出式選單中選取您要查看的狀態。例如,如果您要查看有效狀態的 Widget,請選取「有效」。

指定驗證時間

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

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

    模糊

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

    變更

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

    送出

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

設定密碼強度

密碼強度指的是某些字元組合符合密碼文字欄位需求的程度。例如,如果您建立了一個讓使用者選取密碼的表單,您可能會想強迫使用者在密碼中加入特定數目的大寫字母、特定數目的特殊字元等等。

註解:

根據預設,「密碼」Widget 沒有設定任何可用的選項。

  1. 按一下「驗證密碼」Widget 的藍色索引標籤進行選取。

  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,依照需求設定選項。您在選項欄位中輸入的數字就是 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 的樣式 (一般說明)

  1. 開啟 SpryValidationPassword.css 檔案。

  2. 找到 Widget 中想要變更之部分的 CSS 規則。例如,若要變更「密碼」Widget 的背景顏色,請編輯 SpryValidationPassword.css 檔案中的 input.passwordRequiredState 規則。

  3. 對 CSS 進行所需的變更並儲存檔案。

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

設計驗證密碼 Widget 錯誤訊息文字

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

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

    要變更的文字

    相關的 CSS 規則

    要變更的相關屬性

    錯誤訊息文字

    .passwordRequiredState .passwordRequiredMsg、.passwordMinCharsState .passwordMinCharsMsg、.passwordMaxCharsState .passwordMaxCharsMsg、.passwordInvalidStrengthState .passwordInvalidStrengthMsg、.passwordCustomState .passwordCustomMsg

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

變更驗證密碼 Widget 背景顏色

  1. 若要變更「驗證密碼」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;

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

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