《小白H5成长之路29》一个简单的用户登录验证JS对象

“小白,知道怎么制作登陆模块么?”

“大概能想明白,简单的登陆主要是用户名、密码两个输入框,复杂点的可能会加上验证码和手机验证。用户填写好信息以后,点击确定后把用户输入的信息通过POST方式发送给做登陆处理的PHP页面。做登陆处理的PHP页面判断如果用户名密码正确,则返回登陆正确的JSON字符串,如果用户名密码错误则返回对应的错误信息JSON字符串。”

“嗯,基本没有问题,不过有一个情况你没有考虑。”

“什么情况?”,小白不解的问。

“假如用户输入的用户名为空或者长度不符合要求,还有没有必要向PHP页面发送登陆验证?”

“哦!我知道了,没必要!不符合要求的数据发送到后台PHP页面进行判断肯定是登陆不了的,所以需要提前通过JavaScript进行判断,如果填写的格式不对,可以通过JavaScript提示用户哪里有问题,等用户信息填写正确后再向PHP发送登陆验证的请求,这样不但用户体验好服务器压力也小。”

老朱说:“说的不错,那你现在布局一个简单的用户登录,然后咱试着做个验证判断。”

小白用了几分钟就做完了,跟老朱说道:“布局做好了,我们现在应该怎么做呢?”

“我们现在只判断用户名和密码的长度,用户名最短长度是2,密码最短长度是6。之前定义对象的方法还记得吧?你现在试着定义一个对象,并让这个对象包含判断判断用户名和密码的方法。”

“这个感觉没什么头绪啊,给我1个小时的时间可以么?”

“没问题,我相信你!一定要用对象来做啊,不要用函数。”

“朱哥,做好了,你看看我写的这个有什么问题么?”

老朱仔细看了小白写的代码后,非常高兴,说道:“小白!我现在已经对你刮目相看了,看来你这几天没少做JS对象的练习啊!我非常欣赏你这里每个方法中最后的return this用法。通过这个方法就可以通过链式方法使用对象里面的各个方法了,你还给checkOBJ对象设定了一个ispass属性来判断是否验证通过,真的很不错。”

小白听了以后,内心相当的高兴,说道:“这几天晚上没事我都会看看JS的一些基础知识介绍,正好最近好好研究了一下return的用法。不过我这里用alert提醒用户是不是用户体验很不好啊!”

“没关系的,小白!我们今天主要还是熟悉对象的操作,你已经把JS对象的使用方法又提高了一层,看来不用几天我们就可以学习JS模拟类的操作了。”

“嗯,我也很期待继续提高呢~”

“小白,今天我们做的用户登录验证还有很多需要完善的地方,比如提示用户的时候能不能直接把焦点定位到有问题的文本框,能不能不用alert而使用昨天我们说到的弹层等等。前端用户体验是非常重要的,这一点我们一定不能忽视,所以我还是希望你今天能够继续把用户登录验证完善完善,也当是做一个练习。”

老朱准备走的时候回头又跟小白说了一句:“噢!对了,今天为什么要用一个对象来做判定而不是用几个函数判定,这个你也好好考虑考虑!”


想学H5的朋友可以关注老炉,您的关注是我持续更新《小白HTML5成长之路》的动力!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值