Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

XCeptor 表单验证实例

  之前的一篇「HTTP 拦截与表单验证」中曾提到过将所有表单验证单独抽取到一层中的做法。由于当时没有实现拦截器,所有它一直只是个想法。现在既然有了 XCeptor 这东西,为什么不实现它试试呢?下面这个 DEMO 虽然还没封装,但基本结构已经出来了。 <script src="http://yanagieiichi.github.io/xceptor/xceptor.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script>
// 验证层
XCeptor.post("/api/signin",function(req,res){
  var data={};
  $.each(req.data.split(/&/g),function(index,param){
    var s=param.split(/=/g);
    data[decodeURIComponent(s[0])]=decodeURIComponent(s[1]);
  });
  if(!data.phone){
    res.responseText=JSON.stringify({name:"EMPTYPHONE"});
    res.status=400;
    return false;
  }else if(!/^1[3578]\d{9}$/.test(data.phone)){
    res.responseText=JSON.stringify({name:"INVALIDPHONE"});
    res.status=400;
    return false;
  }else if(!data.password){
    res.responseText=JSON.stringify({name:"EMPTYPASSWORD"});
    res.status=400;
    return false;
  }else if(data.password.length<6){
    res.responseText=JSON.stringify({name:"PASSWORDTOOSHORT"});
    res.status=400;
    return false;
  }
});
</script>
<script>
// 业务代码
$(function(){
  $("#demo").submit(function(){
    $.post("/api/signin",$(this).serialize()).then(function(e){
      console.log(e);
    },function(e){
      var data=JSON.parse(e.responseText);
      console.log(data);
    });
    return false;
  });
});
</script>
<form id="demo">
  手机号:<input name="phone" />
  <hr/>
  密码:<input name="password" type="password" />
  <hr/>
  <input type="submit" value="提交" />
</form>
  上面的代码拦截了请求,在真正请求服务器之前先判断请求的参数是否正确,如果不正确就阻止请求并伪造一个 400 响应,只有所有验证通过后才会将请求发给服务器。
  把验证抽取出来后,业务代码的编写变得非常干净易读。所有表单验证的代码被统一编写,使很多公共验证也可以重用。比如验证手机号的正则表达式可以在验证层中做一个相对大的局部声明,让其他所有手机号验证都使用同一个正则表达式。
  这个实例中由于直接使用了 XCeptor,没有对其进一步封装,所以代码看起来还是有点冗余。因为 XCeptor 是相对底层的拦截器,如果真要用于项目中也许还应该再封装一层,让它更适用于表单验证的处理。
网名:
54.80.247.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^