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

时间：2023-03-11 21:46:49 科技观察

一、前言大家好，我是前端进阶。在web项目开发中，焦点事件经常出现在表单验证函数中。比如文本框获得焦点改变文本框的颜色，文本框失去焦点检查输入的文本框内容是否正确等，接下来小编就带大家实现一个用户登录形式！二、项目准备开发工具：HBuilderX浏览器：谷歌Chrome浏览器三、项目目标1、掌握焦点事件的使用。2.了解获得焦点和失去焦点的知识。3.学会使用包函数。4.项目实现HTML

账号：密码：登录Register

上面代码中div的id是等价的toabox一个大盒子，div的id是img，form，show是一个小盒子。id为img，主要用于放置图片；id为form，主要放置表单，里面嵌套了一个div，id为btn，主要放置登录和注册按钮；id为show，用于显示提示信息。CSS3#box{margin-top:20px;width:800px;height:400px;display:flex;text-align:center;flex-direction:column;justify-content:center;}#form{display:flex;flex-方向：列；对齐内容：中心；}#btn{display：flex；文本对齐：中心；flex-direction：行；对齐内容：中心；}#user{margin-bottom：10px；}#btn_ok{margin-top:10px;margin-right:20px;}#show{margin-top:10px;color:red;}上面代码中#box代表大框的样式，宽高分别为800、400px,margin-top属性表示上边距为20px，弹性布局使用display:flex;flex-direction属性表示主轴方向，colum表示垂直方向，row表示水平方向。justify-content属性表示项目在主轴上的对齐方式，center表示居中。text-align属性指示文本对齐方式。margin-bottom属性表示设置元素的下边距。margin-right属性表示设置元素的右外边距。JavaScript1。获取元素操作函数的对象$(id){returndocument.getElementById(id);}上面代码中使用$(id)函数根据id获取元素。id参数表示标签元素的自定义id名称，例如a标签的id="abc"，获取元素对象，调用$('abc')函数获取元素对象。2、给指定元素添加失去焦点事件functionaddBlur(m){m.onblur=function(){isEmpty(this);}}上面代码中给指定元素添加失去焦点的方法是模糊方法。调用isEmpty()函数判断表单是否为空。3、检查指定元素是否失去焦点，其值为空window.onload=function(){addBlur($('user'));addBlur($('pwd'));}onload表示页面一加载就触发。如果失去焦点，检查具有iduser和pass的元素是否为空值。4.检查表单是否为空functionisEmpty(m){if(m.value===''){$('show').style.display='block';$('show').innerHTML='您输入的内容不能为空！';}else{$('show').style.display='none';}}上面代码中，如果表单内容为空，则将提示内容插入到id为show的对象中。5、处理登录按钮事件——判断账号和密码是否正确$('btn_ok').onclick=function(){if(($('user').value=='abc')&&($('pwd').value=='123')){$('show').style.display='block';$('show').innerHTML='登录成功！';}else{$('show').style.display='block';$('show').innerHTML='账号或密码错误！';}}上面代码中处理登录按钮事件，判断账号和密码输入框是否分别为abc和123。如果账号和密码输入正确或错误，则将提示内容插入到id为show的对象中。效果图如下：五、总结1、本文基于JavaScript基础实现用户登录功能。详细解释每个div层，以便读者更好地理解。2、在JavaScript中，首先获取操作元素的对象，给指定元素添加失去焦点事件，然后检查指定元素是否失去焦点，其值是否为空，检查表单是否为空。最后处理登录按钮的事件。主要是帮助大家了解焦点事件的知识点！3.代码没有那么复杂，希望对你有所帮助！

上一篇：IoT万亿狂想曲

下一篇：CPU如何理解01二进制？

JavaScript用户登录表单解析——焦点事件相关文章