介绍
介绍
今天我们继续开发注册功能,今天主要完成的是表单处理时候的错误提示的处理的技巧。错误处理福哥上一课已经决定了使用tips提示框来实现,tips提示框的特点就是它会在屏幕中间显示一个黑色的框框,里面是白色的错误提示文字,这个提示框会在几秒钟后自动消失掉。
要实现这个功能很显然需要使用JS程序来完成,福哥使用jQuery的控件封装技术开发了一个tips控件,专门用来处理tips提示框的。
Tips控件
代码
(function ($) { var myTips = { prt : null, tips : null, opts : null, start : function(){ var ex=this; tips = $(document.createElement('div')); tips.css({display:"block",position:"fixed",top:'35%',left:'50%',zIndex:9999,background:'#333',color:'#fff',padding:'6px 8px',borderRadius:'5%'}); tips.appendTo(this.prt); tips.text(this.opts.text); tips.css({marginLeft:-1*(tips.width()/2)}); setTimeout(function () { ex.stop(); }, this.opts.timeout); }, stop : function(){ tips.remove(); }, init : function (prt, opts) { if(!opts instanceof Object){ opts = {}; } if(!opts.timeout){ opts.timeout = 1500; } this.prt = $(prt); this.opts = opts; } }; myTips.init.prototype = myTips; $.fn.tips=function (options) { var my = new myTips.init(this, options); my.start(); }; })(jQuery);
注册表单
注册表单的JS比较简单,福哥写了一个基础的版本,以后再慢慢完善吧。这个表单控件增加了对注册表单的表单项的输入数据的验证规则,并且在处理失败的时候使用了tips控件显示错误信息,并且会将光标聚焦到数据错误的表单项上面。
JS代码
// form $('form').form({ url: "api/member/register", method: "post", validations: [ {type:"empty", name:"user", msg:"请填写用户名"}, {type:"min", value:2, name:"user", msg:"用户名最少2个字"}, {type:"max", value:20, name:"user", msg:"用户名最多20个字"}, {type:"re", value:/^[^\`\~\!\@\#\$\%\^\&\*\(\)\[\]\{\}\-\_\+\|\\\:\;\"\'\<\>\,\.\?\/]/, name:"user", msg:"用户名不能以符号开头"}, {type:"empty", name:"pass", msg:"请填写密码"}, {type:"min", value:6, name:"pass", msg:"密码最少6个字"}, {type:"empty", name:"confirmPass", msg:"请填写确认密码"} ], onSuccess: function (d) { if(d.errcode == 0){ } else{ $('form').tips({ text:d.errmsg }); } }, onError: function (d) {console.log(d); $('form').tips({ text:"服务器响应错误" }); }, onValidationError: function (form, name, msg) { $('form').tips({ text:msg }); $('form').find('[name="'+ name +'"]').focus(); } });
总结
今天福哥带着童鞋们完成了jQuery控件tips的开发以及将tips控件投入到注册表单的错误处理上面。可以看到要实现一个含有表单的网页需要学习的东西还是很多的。不过,有些东西也可以使用别人弄好的开源代码来实现,比如福哥开发的tips控件就有很多现成的代码可以使用。但是,作为一个学习的人来说,有机会尝试自己开发还是需要积极地锻炼锻炼,毕竟实践的经验是很宝贵的~~
下一课我们继续开发注册页面,下一课就直奔主题了,完成注册功能的接口控制器api/member/register,就可以完成注册功能了