雅虎用戶界面博客（YUIBlog）

在YUI 3畫廊：約翰Lindal的表格管理

表格已在網站上主食了很長的時間。 在創業初期，他們很簡單：用戶輸入的值，然後等待，而服務器處理的值或吐回錯誤。 Web 2.0的興起，大大提高了經驗，尤其是通過預驗證客戶端上。 這提供即時反饋，避免無謂的連接到服務器。

預驗證僅僅是一個方面的形式，但是。 整個週期是：

1. 預填充表單的默認值;
2. 預驗證輸入的瀏覽器;
3. 提交表單數據到服務器同步或異步;
4. 顯示結果返回的服務器（成功或錯誤）。

當與YUI 3 IO中，YUI 3畫廊模塊表格管理支持這個完整週期。 你可以玩的客戶端功能在這裡 。

初始化

第一步，預填充表單的默認值，當然最好是通過直接在設定值的標記，因為這個工程，即使JavaScript被關閉。 但是，您也可以通過地圖的默認值，鍵上的姓名的形式元素，​​表格管理的構造。 當你調用prepareForm()它合併的默認值從DOM的默認值傳遞給構造函數，構造函數值的優先考慮。 其結果是保存，以便您可以輕鬆地重置為這些值通過調用populateForm() 您還可以修改這些存儲默認： setDefaultValues() setDefaultValue()或saveCurrentValuesAsDefault() （請注意，這是不同於瀏覽器的本地reset功能，因為只使用值編碼的DOM。窗體管理器提供clearForm()作為一個包裝為reset 。）

另一個有用的函數調用中初始化initFocus() 這台集中的第一個元素的形式。 如果填寫表格的主要原因是訪問頁面，這樣可以節省用戶的點擊。 顯然，如果你有一個以上的表格在頁面上，你應該只調用initFocus()為其中之一。

預驗證

預驗證用戶輸入的是一個很棘手的事情 。 根據我的經驗，最簡單的方法是最好的：檢查之後的所有用戶說我做了，這避免了需要過濾的輸入流（的KeyUp很容易趕上，但粘貼是個老大難問題，而這一切導致非常意外邊緣的情況下的行為），更重要的是，它不會中斷用戶的流量。 這就是為什麼表管理提供了一個函數來驗證一切形式（鼓卷，請）： validateForm()

不像其他的解決方案，表格大部分門店經理的驗證配置的DOM。 為了紀念一個字段的驗證，應用一個或多個下列CSS類直接到現場：

yiv-required

值不能為空。

yiv-length:[x,y]

字符串必須至少x字符，最多Y字符。 至少有一個 x和y必須是指定的。

yiv-integer:[x,y]

該值必須是一個整數，其值必須至少x和y的最多 X和Y都是可選的。

yiv-decimal:[x,y]

該值必須是一個小數，值必須至少x和y的最多 指數是不允許的。 X和Y都是可選的。

例如，如果一個字段必須填寫，而且只接受6至10個字符，CSS類將yiv-required yiv-length:[6,10]

一個很好的效益的編碼驗證在CSS類是，它可應用在相關的情況，例如，當編輯動態創建的字段的表。 （我希望發布一個例子為YUI 2 DataTable的到來。）FormManager暴露了靜態功能validateFromCSSData()這樣你就不必另起爐灶。

如果您需要使用正則表達式來驗證領域，註冊它通過調用setRegex() 為別的，你可以將一個函數的字段通過調用setFunction() 如果您需要執行檢查，涵蓋多個領域，您可以覆蓋postValidateForm()在您的實例Y.FormManager 。

最後一點：顧名思義，預驗證是不是真正的驗證 。 JavaScript是比較容易顛覆（或完全關閉），因此服務器必須永遠不要相信任何東西，它從客戶端接收。 此外，一些檢查只能在服務器上完成，例如，任何需要訪問數據庫。

顯示錯誤

顯然，如果不是預先驗證的客戶端或服務器上驗證失敗，則需要通知用戶，最好通過突出的領域中需要注意的。 通過表格管理器支持此功能displayMessage()

這個函數需要一些CSS標記類的DOM surrouning每個表單元素或一組緊密結合的形式元素。 我最喜歡的佈局是：

 <div class=" formmgr-row>
  元素的標籤 ... ...
   <span class=" formmgr-message-text "> </ SPAN>
   ...表單元素標記的CSS類formmgr場 ...
 </ DIV>

這個項目是本地化好，因為上面的標籤是外地的，當一個錯誤信息顯示，它非常清楚這領域的錯誤適用。 要看到它在行動上，按照這個鏈接 ，然後點擊驗證按鈕在左上角的頁面。

但是，這只是我的偏好。 您可以安排DOM元素中的任何您想要的方式在貨櫃內標誌formmgr-row ，只要是另一個容器內的某處標誌formmgr-message-text和字段本身的特點是formmgr-field 。

消息類型

其中重要的一點是， displayMessage()需要一個消息類型。 支持的類型存儲在Y.FormManager.status_order在優先順序。 默認值是[ 'error', 'warn', 'success', 'info' ]但你可以修改這個以滿足您的需求。 的順序很重要，因為如果你調用displayMessage()具有較高的優先級類型和領域已顯示消息具有較低的優先級，那麼新的信息將取代原始郵件。 同樣，較低優先級的消息將被忽略，如果一個更高優先級的消息已經顯示出來。 這可以讓你折騰的消息在各個領域與放棄，在安全的知識，錯誤將覆蓋警告。

當消息顯示，容器標有formmgr-row和字段標有formmgr-field都獲得一個額外的CSS類： formmgr-has type ，其中類型是消息的類型。 這可以讓你風格的消息，現場，標籤等，以不同的方式為每個消息類型。 此外，字段集包含表單域也得到相同的類。 這可以被用來引導用戶的注意力時，形成大。 （如果幾個領域內的fieldset有不同類型的消息，最高優先級類型設置的字段集。）

消息

表格管理器包括一個默認的設置錯誤信息的所有驗證，可以在CSS編碼。 這些字符串存儲在Y.FormManager.Strings ，所以你可以修改和/或本地化的。

您也可以指定自定義消息的各個字段通過調用setErrorMessages()

注意，這裡沒有默認消息為正則表達式驗證器，因為任何一般喜歡的值不匹配所需要的模式。是毫無意義的用戶。 如果不設置消息的類型regex之前設置正則表達式本身，表格管理器將記錄錯誤，提醒你。

提交表單

無論您提交的數據同步（通過form.submit()或異步（通過Y.io ），你可能要禁用的形式而數據正在處理中。 表格管理器自動發現裡面的所有按鈕 <form>元素。 如果您有其他額外的按鈕在頁面上，你可以註冊他們致電registerButton() 所有已知的按鈕將被禁用當你調用disableForm() （如果您使用XHR，請enableForm()後，您將收到來自服務器的響應！）

如果您提交的表格同步，那麼你將服務於同一頁，如果再有錯誤。 為了工作，沒有 JavaScript，你應該寫的錯誤，直接到DOM，以同樣的方式，形成管理它。

如果您提交通過XHR，那麼你知道，啟用JavaScript，所以你可以使用displayMessage()以突出的價值，服務器拒絕。 顯然，這需要從服務器的響應，包括詳細的錯誤信息！

最後一點，如果形式是在一個覆蓋，那麼你應該只關閉疊加，如果服務器的響應與成功 ，也就是說，顯示錯誤的疊加，但會顯示一條成功消息某處突出的主頁上。

查找談話： bloglines | technorati

共享和擴展： 書籤與del.icio.us | Digg它！ | 書籤交易！