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

一、浅析前言

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

二、项目准备

开发工具：HBuilderX

浏览器：Google Chrome浏览器

三、户登项目目标

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

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

3.学会运用封装函数。用单焦点事

四、户登项目实现

HTML

<div id="box"> <div id="img">     <img src="img/1.jpg" /> </div> <div id="form">     <label>账号：<input type="text" id="user"></label>     <label>密码：<input type="text" id="pwd"></label>     <div id="btn">     <button id="btn_ok">登录</button>     <button id="btn_ok">注册</button>     </div> </div> <div id="show"></div> </div> 

在上面代码中，div的id为box相当于一个大盒子，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-direction: column;     justify-content: center; } #btn{     display: flex;     text-align: center;     flex-direction: row;     justify-content: center; } #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属性表示设置元素的右外边距。

JavaScript

1.获取元素操作的对象

function $(id){     return document.getElementById(id); } 

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

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

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

function addBlur(m){     m.onblur=function(){         isEmpty(this);     } } 

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

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

window.onload=function(){     addBlur($(user));     addBlur($(pwd)); } 

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

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

4.检验表单是不是为空

function isEmpty(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中首先获取操作元素的对象，给指定元素添加失去焦点事件，之后，检验指定元素失去焦点，它的value值是否为空，检验表单是否为空。最后处理登录按钮的事件。主要是帮助大家理解焦点事件的知识点!

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