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验证要绕过的方法太多了)

--

本文可能有理解错误 ?或不尽不实的地方

请路过的前辈不要客气 ?用力打醒

这会是我们成长的主要养分

原文:大专栏  jQuery大神帮你做后台 - 验证篇