当前位置: 首页 > 科技观察

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.代码没有那么复杂,希望对你有所帮助!