前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >浅析JavaScript的用户登录表单——焦点事件

浅析JavaScript的用户登录表单——焦点事件

作者头像
前端进阶者
发布2021-03-19 14:32:24
1.8K0
发布2021-03-19 14:32:24
举报
文章被收录于专栏:前端进阶交流前端进阶交流

一、前言

大家好,我是前端进阶者。在Web项目开发中,经常会在表单验证功能看到焦点事件。例如,文本框获取焦点改变文本框的颜色,文本框失去焦点检验输入的文本框的内容是否正确等。接下来,小编带大家一起来实现一个用户登录的表单!

二、项目准备

开发工具:HBuilderX

浏览器:Google Chrome浏览器

三、项目目标

1.掌握焦点事件的使用。

2.理解获取焦点和失去焦点知识。

3.学会运用封装函数。

四、项目实现

HTML

在上面代码中,div的id为box相当于一个大盒子,div的id为img、form、show为小盒子。

id为img主要是放置图片;

id为form主要是放置表单,在里面嵌套还有一个div,它的id为btn,主要是放置登录、注册按钮;

id为show是用来显示提示信息。

CSS3

在上面代码中,#box表示大盒子的样式,宽度和高度分别为800、400px,margin-top属性表示上外边距为20px,使用弹性布局display: flex;

flex-direction属性表示控制主轴的方向,colum表示垂直方向,row表示水平方向。

justify-content属性表示项目在主轴上的对齐方式,center表示中间。

text-align属性表示文字对齐方式。

margin-bottom属性表示设置元素的下外边距。

margin-right属性表示设置元素的右外边距。

JavaScript

1.获取元素操作的对象

在上面代码中,$(id)函数用于根据id获取元素。

id参数表示标签元素自定义的id名称,例如,a标签的id="abc",获取该元素对象调用$('abc')函数就可以获取元素的对象。

2.给指定元素添加失去焦点事件

在上面代码中,指定元素添加失去焦点方法是onblur方法。调用isEmpty()函数判断表单是不是为空。

3.检验指定元素失去焦点,它的value值是不是为空

在上面代码中,window.onload表示页面一加载就触发。

检验id为user和pass的元素如果失去焦点,它的value值是不是为空。

4.检验表单是不是为空

在上面代码中,如果表单内容为空,向id为show对象中插入提示内容。

5.处理登录按钮事件——判断账号和密码是否正确

在上面代码中,处理登录按钮事件,判断账号和密码输入框内容分别是否是abc、123。如果账号和密码输入正确或错误,向id为show对象中插入提示内容。

效果图如下所示:

五、总结

1.本文基于JavaScript基础,实现用户登录的功能。对每一个div层进行详解,让读者更好的理解。

2.在JavaScript中首先获取操作元素的对象,给指定元素添加失去焦点事件,之后,检验指定元素失去焦点,它的value值是否为空,检验表单是否为空。最后处理登录按钮的事件。主要是帮助大家理解焦点事件的知识点!

3.代码没有那么复杂,希望对你有所帮助!

最后需要本文项目代码的小伙伴,请在公众号后台回复“焦点事件”关键字进行获取,如果在运行过程中有遇到任何问题,请随时留言或者加小编好友,小编看到会帮助大家解决bug噢!

------------------- End -------------------

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端进阶学习交流 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 二、项目准备
  • 三、项目目标
  • 四、项目实现
    • HTML
      • CSS3
        • JavaScript
        • 五、总结
        相关产品与服务
        访问管理
        访问管理(Cloud Access Management,CAM)可以帮助您安全、便捷地管理对腾讯云服务和资源的访问。您可以使用CAM创建子用户、用户组和角色,并通过策略控制其访问范围。CAM支持用户和角色SSO能力,您可以根据具体管理场景针对性设置企业内用户和腾讯云的互通能力。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档