jQuery MiniUI開發系列之：數據驗證

在開發應用系統界面時，往往需要進行很多、復雜的數據驗證，當填寫的數據符合規定，才能提交保存。
jQuery MiniUI提供了比較完美的表單數據驗證和錯誤顯示的方式。

常見的表單控件，都有一個驗證事件"validation"。
通過監聽處理“validation”事件，我們可以自定義驗證規則邏輯、是否驗證通過、驗證錯誤描述等。

1. //監聽處理"validation"事件
   
2. textbox1.on("validation", function (e) {
   
3.     if (e.isValid) {
   
4.         if (isEmail(e.value) == false) {
   
5.             e.errorText = "必須輸入郵件地址";
   
6.             e.isValid = false;
   
7.         }
   
8.     }
   
9. });
   
10. //進行驗證
    
11. textbox1.validate();

復制代碼

假設一個表單內，有20個需要驗證的控件，那是否需要調用20次驗證方法呢？
jQuery MiniUI對此提供的方案是：使用mini.Form組件，批量驗證多個控件。

1. var form = new mini.Form("#form1");
   
2. form.validate();
   
3. if (form.isValid() == false) {
   
4.     alert("失敗");
   
5. } else {
   
6.     alert("成功");
   
7. }

復制代碼

開發者只需要獲取一個最外層的div，將其創建成"mini.Form"組件，就可以調用"form.validate()"方法批量驗證，節省大量無必要的代碼。

經過以上的簡單處理，數據驗證工作做好了，那么驗證提示的效果如何呢？如下所示：

注意：不需要為錯誤Icon占位去計算整體寬度。
比如一個TextBox正常顯示是150px，當驗證錯誤顯示時，TextBox的寬度會自動縮短25px左右，錯誤Icon會占據這25px顯示。

以上內容描述了MiniUI最基本、最常用的數據驗證方式。
MiniUI也可以自定義錯誤顯示方式，如錯誤內容集中提示、彈出提示等。

參考示例：
    數據驗證：http://miniui.com/demo/form/validation.html
    集中顯示：http://miniui.com/demo/form/validGroup.html
    彈出顯示：http://miniui.com/demo/form/validWindow.html

附件是表單驗證示例：

下載附件地址：http://miniui.com/bbs/forum.php?mod=viewthread&tid=17&extra=page%3D1