使用 Spry 驗證文字欄位 Widget

搜尋

上次更新時間

註解：

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

關於驗證文字欄位 Widget

Spry 驗證文字欄位 Widget 是一種文字欄位，會在網頁瀏覽者輸入文字時，顯示有效或無效狀態。例如，您可以在瀏覽者鍵入電子郵件地址的表單中，新增驗證文字欄位 Widget。如果瀏覽者沒有鍵入電子郵件地址的 “@” 符號或句點，Widget 就會傳回訊息，指出使用者輸入的資訊無效。

下列範例顯示各種狀態中的驗證文字欄位 Widget：

A. 文字欄位 Widget (已啟動提示) B. 文字欄位 Widget (有效狀態) C. 文字欄位 Widget (無效狀態) D. 文字欄位 Widget (必要狀態)

驗證文字欄位 Widget 包含幾種狀態 (例如有效、無效、必要的值等等)。您可以依照所需要的驗證結果，使用「屬性」檢視窗來變更這些狀態的屬性。驗證文字欄位 Widget 可以在不同的時間點進行驗證，例如，當瀏覽者在 Widget 外按一下、鍵入資料或是嘗試送出表單等時間點。

初始化狀態

頁面載入瀏覽器或使用者重設表單時的 Widget 狀態。

焦點狀態

使用者將插入點置於 Widget 時的 Widget 狀態。

有效狀態

使用者輸入正確資訊且表單可以送出時的 Widget 狀態。

無效狀態

使用者以無效格式輸入文字時的 Widget 狀態 (例如，以 06 而非 2006 來表示 2006 年)。

必要狀態

使用者未在文字欄位中輸入必要文字時的 Widget 狀態。

最小字元數目狀態

使用者在文字欄位中輸入的字元，少於最小必要字元數目時的 Widget 狀態。

最大字元數目狀態

使用者在文字欄位中輸入的字元，大於最大允許字元數目時的 Widget 狀態。

最小值狀態

使用者在文字欄位中輸入的值，小於必要值時的 Widget 狀態 (適用於整數、實數和資料類型驗證)。

最大值狀態

使用者在文字欄位中輸入的值，大於所允許的最大值時的 Widget 狀態 (適用於整數、實數和資料類型驗證)。

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

驗證文字欄位 Widget 的預設 HTML 通常位於表單內，是由圍繞著文字欄位之 <input> 標籤的容器 <span> 標籤所組成。驗證文字欄位 Widget 的 HTML 也包含位於文件頁首和 Widget 之 HTML 標記後面的 Script 標籤。

如需驗證文字欄位 Widget 運作方式的詳細說明，包括驗證文字欄位 Widget 程式碼的完整分析，請參閱 www.adobe.com/go/learn_dw_sprytextfield_tw。

插入並編輯驗證文字欄位 Widget

插入驗證文字欄位 Widget

選取「插入＞Spry＞Spry 驗證文字欄位」。
完成「Input 標籤輔助功能屬性」對話框並按一下「確定」。

註解：

您也可以使用「插入」面板中的「Spry」類別來插入驗證文字欄位 Widget。

指定驗證類型與格式

您可以為驗證文字欄位 Widget 指定不同的驗證類型。例如，如果文字欄位接受信用卡卡號，您可以指定信用卡驗證類型。

在「文件」視窗中選取驗證文字欄位 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 中，從「類型」選單中選取驗證類型。
如果適用的話，從「格式」彈出式選單中選取格式。

大部分的驗證類型都會使文字欄位預期得到標準格式。例如，如果您將整數驗證類型套用至文字欄位，Widget 就會等待使用者在文字欄位輸入數字之後，才進行驗證。不過，有些驗證類型可以讓您選擇文字欄位所要接受的格式種類。下表列出「屬性」檢視窗所提供的驗證類型與格式：

驗證類型	格式
無	不需要特定格式。
整數	文字欄位僅接受數字。
電子郵件地址	文字欄位接受包含 @ 和句點 (.)，且其前後都至少有一個字母的電子郵件地址。
日期	格式會有所不同。請從「屬性」檢視窗的「格式」彈出式選單中選取您要的項目。
時間	格式會有所不同。請從「屬性」檢視窗的「格式」彈出式選單中選取您要的項目 (“tt” 代表 am/pm 格式，“t” 代表 a/p 格式)。
信用卡	格式會有所不同。請從「屬性」檢視窗的「格式」彈出式選單中選取您要的項目您可以選擇接受所有信用卡，或是指定僅接受特定類型的信用卡 (如 MasterCard、Visa 等等)。文字欄位不接受信用卡卡號之間的空格，如 4321 3456 4567 4567。
郵遞區號	格式會有所不同。請從「屬性」檢視窗的「格式」彈出式選單中選取您要的項目。
電話號碼	文字欄位接受美國和加拿大的電話號碼格式 (000) 000-0000 或自訂的格式。如果您選擇自訂格式選項，請在「模式」文字方塊中輸入格式，例如 000.00(00)。
身分證字號	文字欄位接受的身分證字號格式為 000-00-0000。如果您要使用不同的格式，請選取「自訂」做為驗證類型，然後指定一種模式。模式驗證機制只接受 ASCII 字元。
貨幣	文字欄位接受的貨幣格式為 1,000,000.00 或 1.000.000,00。
實數/科學記號	驗證各種數字：整數 (例如 1)、浮點數值 (例如 12.123) 以及科學標記法的浮點數值 (例如 1.212e+12、1.221e-12，其中 e 代表 10 次方)。
IP 位址	格式會有所不同。請從「屬性」檢視窗的「格式」彈出式選單中選取您要的項目。
URL	文字欄位接受的 URL 格式為 http://xxx.xxx.xxx 或 ftp://xxx.xxx.xxx。
自訂	可讓您指定自訂的驗證類型和格式。在「屬性」檢視窗中輸入格式模式 (需要的話，還可以輸入提示)。模式驗證機制只接受 ASCII 字元。

指定驗證時間

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

在「文件」視窗中選取驗證文字欄位 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 中，選取能夠表示您要執行驗證的時間選項。您可以選取所有選項或者僅選取「送出」。

模糊

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

變更

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

送出

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

指定最小與最大字元數

這個選項僅適用於「無」、「整數」、「電子郵件地址」和「URL」驗證類型。

在「文件」視窗中選取驗證文字欄位 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 中，在「最小字元數」或「最大字元數」方塊中輸入數字。例如，如果您在「最小字元數」方塊中輸入 3，Widget 只會驗證使用者是否輸入三個或以上的字元。

指定最小與最大值

這個選項僅適用於「整數」、「時間」、「貨幣」和「實數/科學記號」驗證類型。

在「文件」視窗中選取驗證文字欄位 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 中，在「最小值」或「最大值」方塊中輸入數字。例如，如果您在「最小值」方塊中輸入 3，Widget 只會驗證使用者是否在文字欄位中輸入數字 3 或以上的值 (4、5、6 等等)。

在設計檢視中顯示 Widget 狀態

在「文件」視窗中選取驗證文字欄位 Widget。
在「屬性」檢視窗 (「視窗＞屬性」) 中，從「預覽狀態」彈出式選單中選取您要查看的狀態。例如，如果您要查看有效狀態的 Widget，請選取「有效」。

變更文字欄位的必要狀態

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

在「文件」視窗中選取驗證文字欄位 Widget。
在「屬性」檢視窗 (「視窗 > 屬性」) 中，根據您的偏好選取或取消選取「必要」選項。

建立文字欄位的提示

由於文字欄位有多種不同的格式，因此若能給使用者一點提示，將可協助他們瞭解要以何種格式輸入。例如，以「電話號碼」驗證類型設定的文字欄位只接受格式為 (000) 000-0000 的電話號碼。您可以輸入這些樣本號碼做為提示，這樣當使用者在瀏覽器中載入網頁時，文字欄位就會顯示正確的格式。

在「文件」視窗中選取驗證文字欄位 Widget。
在「屬性」檢視窗 (「視窗 > 屬性」) 中，在「提示」文字方塊中輸入提示。

封鎖無效字元

您可以避免使用者在驗證文字欄位 Widget 中輸入無效字元。例如，如果您針對以「整數」驗證類型所設定的 Widget 選取這個選項，則當使用者嘗試輸入字母時，文字欄位中不會出現任何文字。

在「文件」視窗中選取驗證文字欄位 Widget。
在「屬性」檢視窗 (「視窗 > 屬性」) 中，選取「強制執行模式」選項。

自訂驗證文字欄位 Widget

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

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

註解：

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

設計驗證文字欄位 Widget 錯誤訊息文字

根據預設，驗證文字欄位 Widget 的錯誤訊息會以紅色文字呈現，文字周圍環繞著 1 像素的邊框。

若要變更驗證文字欄位 Widget 錯誤訊息的文字樣式，請使用下表找出適合的 CSS 規則，然後變更預設屬性，或者新增您自己的文字樣式屬性和值：

要變更的文字	相關的 CSS 規則	要變更的相關屬性
錯誤訊息文字	.textfieldRequiredState .textfieldRequiredMsg、.textfieldInvalidFormatState .textfieldInvalidFormatMsg、.textfieldMinValueState .textfieldMinValueMsg、.textfieldMaxValueState .textfieldMaxValueMsg、.textfieldMinCharsState .textfieldMinCharsMsg、.textfieldMaxCharsState .textfieldMaxCharsMsg	color: #CC3333; border: 1px solid #CC3333;

變更驗證文字欄位 Widget 背景顏色

若要變更驗證文字欄位 Widget 在各種狀態下的背景顏色，請使用下表找出適合的 CSS 規則，然後變更預設的背景顏色值：

要變更的顏色	相關的 CSS 規則	要變更的相關屬性
Widget 在有效狀態下的背景顏色	.textfieldValidState input、input.textfieldValidState	background-color: #B8F5B1;
Widget 在無效狀態下的背景顏色	input.textfieldRequiredState、.textfieldRequiredState input、input.textfieldInvalidFormatState、.textfieldInvalidFormatState input、input.textfieldMinValueState、.textfieldMinValueState input、input.textfieldMaxValueState、.textfieldMaxValueState input、input.textfieldMinCharsState、.textfieldMinCharsState input、input.textfieldMaxCharsState、.textfieldMaxCharsState input	background-color: #FF9F9F;
Widget 成為焦點時的背景顏色	.textfieldFocusState input、input.textfieldFocusState	background-color: #FFFFCC;