艺灵设计

全部文章
×

destoon教程之修复手机验证bug和优化提交功能

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2015-09-21 22:48:58 - 阅: - 评:0 - 积分:0

摘要:
  destoon管理系统虽然很强大,但也存在很多细节问题和bug。比如说:手机号验证只停留在判断11位数字上面,邮编验证只判断长度是否为6......

前几天公司一直在测试购物流程,然后艺灵发现这个提交订单这一步存在大量的问题,还是一点点来说吧。

首先我们来看下“提交订单”这一步的界面,如图:destoon支付页面效果图注意看图中两个不同颜色的框。可以很显示的看到数字编号为2的框是多余的,因为框1中已经显示了买家的具体信息,所以说我们要去掉框2的这个步骤。

可能有看官会想到:先在dreamweaver中打开这个buy.html页面,然后找到框2的位置,删除掉信息,然后上传替换文件。

此想法固然虽好,但可行性有多高呢?注意看框2前面的红色星号,有点常识的看官都知道:红色星号代表必填项。此时你直接删除掉了框2的内容,点击提交时肯定会报错!因为默认情况下这个“期望物流”是空值。

可能有看官会想到:那我不删除,我直接隐藏掉,然后写个jquery默认填充“期望物流”,这样不就行了?

虽然这种方法可行,但如果手机号等信息错误时你就看不到提示了......

优化方案

想了好久后我想到一个方案:在用户添加地址页面进行判断,然后这个页面框2依旧隐藏,但在提交的那一刻,框2的值重新获取。(取框1的值)。考虑到部分用户是之前注册的,这里还要进行二次判断,比如说:手机号、邮编等。最终优化效果图:最终优化后的页面

有了方案后要去执行了,但是你会发现:destoon存在几个严重的bug!对,没错,是bug!!!

destoon bug之手机号无验证

我们先用自己的帐号登录商务中心,然后开始添加自己的收货地址。其实destoon对手机号的验证仅限于长度为11,也就是说:只要你输入11位数字,不管有没有这个手机号都是正确的,这明显不行嘛!比如说:我直接输入11个1,你再点击提交订单时可以通过。而实际过程中,根本就没有11开头的手机号!所以,这个验证我们需要自己手写了。bug回放:destoonbug重现之无手机验证

destoon bug之邮编无验证

跟上面的手机号一样,邮编也只判断长度是否为6。如图: 

唉,无力吐槽了。destoon作为一个这么大的b2b网站管理系统,竟然在这个功能上如此的敷衍......

没办法,既然系统功能有缺陷,我们只好手写了。下面贴艺灵的源码,如果看官的js比较好,也可以手写哈。

验证手机号

  1. <!--说明:1.修改页面路径:/template/default/member/address.htm
  2. 2.需引入jquery库,建议1.8.3版本以上;
  3. 3.给页面中的“确定”按钮添加一个id="sub"
  4. time:2015-09-16 source:yilingsj.com-->
  5. <script>
  6. $(function(){
  7.  //提交时判断
  8.  $('#sub').on('click',function(){
  9.   //建立验证手机号的正则
  10.   var $ms=/^1[3458]\d{9}$/;
  11.   var $val=$('#mobile').val();//获取输入的手机号
  12.   if($val.length==0){//长度为0
  13.    alert('喔唷,您还没有输入手机号呢');
  14.    return false;
  15.   }else if($val.length==11){//长度为11
  16.    if(!$ms.test($val)){//正则判断
  17.     alert('喔唷,手机号码有误');
  18.     return false;
  19.    };
  20.   }else{
  21.   alert('喔唷,手机号码不正确');
  22.   $('#mobile').focus();//手机号文本框获取焦点
  23.   return false;
  24.   };
  25.  });
  26. });
  27. </script>

来一张截图吧,免得有些看官不知道怎么操作。配图: 

同理,我们可以给邮编的也写一个验证,这里就不写了。此时我们再提交,手机号不在范围内会直接弹出提示。如图: 

需要注意的是:收货地址页面中的“修改”按钮也要添加id="sub",前台购买页面路径:/template/文件夹/mall/buy.htm页面需要添加手机号验证的判断和收货地址为空的判断。这一步主要是因为有些用户在注册时并没有填写收货地址。

好了,大功暂时告成,此页面流程后续还有待优化。

友情提示:由于需求不同,本文章的方案可能并不适合看官,请斟酌使用。

----------完----------

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/xwzj/2015-09-21/316.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: destoon教程 手机号验证 bug 提交功能 正则表达式

上一篇: destoon b2b网站管理系统教程之v5.0升级到v6.0   下一篇: destoon5天内被曝出俩漏洞,v6.0升级包已更新

评论区