jQuery大神幫你做後台 - 驗證篇 | 苦命工程師的載沉載浮 - 點部落

2011-01-07

jQuery大神幫你做後台 - 驗證篇

9518
0
jQuery

jQuery大神幫你做後台 - 驗證篇

有了儲存, 就一定要有驗證

過去大家應該都是使用ASP.NET的驗證控制項

坦白說, 超強大的啊, 簡單好用, 而且前後台都可以驗證

根本就三個願望一次滿足了

但我就是不喜歡, 算個人處女座潔癖吧 = =

看到編輯時候的亂七八糟HTML我就快要抓狂

實際輸出的HTML碼更是看到快要瘋掉, 怎麼可以這麼混亂

但之前使用AutoPostBack機制發佈資料,

驗證控制項可以結合的很漂亮

就摸了摸鼻子繼續用

但是現在都用AJAX傳資料, 也很少在用.NET的控制項

驗證控制項無用武之地

於是就把腦筋動到了jQuery頭上

要是我畫表單寫css的時候

偷偷給他加上一個屬性

然後我在存資料的時候加上一個


var result = true;
$('input[validate*=required').each(function() {
     var $this = $(this);
     var val =  $this.val();
     if (!val || val.length == 0)  {
         result = false;
         return false;
     }
});

if(result) 
    save();
else
    alert('你需要輸入全部的資料!');

這樣不就可以讓jQuery自動幫我驗證了嗎

而且HTML也很簡潔, 一眼就可以看出來哪個input為必填 (雖然不符合W3C規定啦不要鞭我)

而且每一頁都可以套用同一支程式

只有驗證成功才可以儲存

寫到這邊就想到, 反正都用jQuery了, 那不如我在把沒通過的input標出顏色好了

反正我有用jQuery UI Theme, 裡面有一個class 'ui-state-highlight' 正好符合我的需求

因此就把程式改成


var highLight = 'ui-state-highlight';
var result = true;

$('input[validate*=required').removeClass(highLight)
     .each(function() {
          var $this = $(this);
          var val =  $this.val();
          if (!val || val.length == 0)  {
              $this.addClass(highLight);
              result = false;
              return false;
          }
     });

if(result) 
    save();
else
    alert('你需要輸入全部的資料!');

效果還ok吧, 就把他標上黃色, 當然顏色可以自訂

後來又想到要是有訊息不是更好, 可是我要怎麼知道這個input要叫什麼

於是把input改成


var highLight = 'ui-state-highlight';
var result = true;
var message = '';

$('input[validate*=required').removeClass(highLight)
     .each(function() {
          var $this = $(this);
          var val =  $this.val();
          if (!val || val.length == 0)  {
              $this.addClass(highLight);
              var title = $this.attr('title');
              if (title && title.length > 0)
                  message += title + ' is Required!';
              result = false;
          }
     });

if(result) 
    save();
else
    alert(message ?? '你需要輸入全部的資料');

這樣有訊息有標明應該更清楚了

當然之後加上對select, radio, checkbox的支援

還有加上max min, regular, isNumber等驗證就是另外的故事了 = =

( 再加上我因為太懶每個欄位打title, 就用jQuery抓每個input前面的span內容直接寫成input的title, 反正吃的是Client端的記憶體啦啦啦)

而且最重要的事情還是

這一支程式可以用在每一頁上, 不需要額外重寫 ( 當然有例外狀況啦, 這就發揮程式設計師的智慧去擴充功能吧)

到這邊我們可以整理出來

我們一個後台的維護介面

從放資料, 驗證, 組成資料通通都可以用jQuery設計一個架構去套用到所有的頁面

而ASP.NET就透過PageMethod丟資料過來, 以及做對應的處理

我們其實可以把每一頁要寫的程式碼發揮智慧降到最低

除了增加維護測試的便利性外, 開發速度可以快非常多

當然.NET最新的又推出了更多更方便的新技術讓我們更容易的設計後台

甚至可以什麼程式都不用寫

我也還在努力鑽研中

而這邊只是提供一個方向, 希望高手指點了

本來想要把整個寫完的jQuery UI貼上來, 後來想想太冗長了

而且還沒有經過完整的測試

就不丟上來獻醜了

下一篇希望有時間介紹flexigrid這個威力強大的table UI,

讓我們的後台可以用簡單的方式呈現清楚明確好用的資料

再麻煩各位先進指點了

(忘了註明, 這樣只有前台的驗證, 重要的資料在Server端記得要在驗證一次

要記得: 資料在進資料庫之前都是不可信賴的, 純Client驗證要繞過的方法太多了)

本文可能有理解錯誤或不盡不實的地方

請路過的前輩不要客氣用力打醒

這會是我們成長的主要養分

回首頁