189 8069 5689

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

一、前言

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

成都创新互联公司"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！成都创新互联公司具备承接各种类型的成都网站建设、做网站项目的能力。经过十余年的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。

二、项目准备

开发工具：HBuilderX

浏览器：Google Chrome浏览器

三、项目目标

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

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

3.学会运用封装函数。

四、项目实现

HTML

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.      
    4.
 
  •  
  •      
  •      
  •      
  •     登录 
  •     注册 
  •     
    •  
  •  
  •  
  •  

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

    id为img主要是放置图片;

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

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

    CSS3

     
 
 
 
      
  
  
  
  
    1. #box{ 
      2. 
  
  
  
  
    2.     margin-top: 20px; 
      3. 
  
  
  
  
    3.     width: 800px; 
      4. 
  
  
  
  
    4.     height: 400px; 
      5. 
  
  
  
  
    5.     display: flex; 
      6. 
  
  
  
  
    6.     text-align: center; 
      7. 
  
  
  
  
    7.     flex-direction: column; 
      8. 
  
  
  
  
    8.     justify-content: center; 
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10. #form{ 
      11. 
  
  
  
  
    11.     display: flex; 
      12. 
  
  
  
  
    12.     flex-direction: column; 
      13. 
  
  
  
  
    13.     justify-content: center; 
      14. 
  
  
  
  
    14. } 
      15. 
  
  
  
  
    15. #btn{ 
      16. 
  
  
  
  
    16.     display: flex; 
      17. 
  
  
  
  
    17.     text-align: center; 
      18. 
  
  
  
  
    18.     flex-direction: row; 
      19. 
  
  
  
  
    19.     justify-content: center; 
      20. 
  
  
  
  
    20. } 
      21. 
  
  
  
  
    21. #user{ 
      22. 
  
  
  
  
    22.     margin-bottom: 10px; 
      23. 
  
  
  
  
    23. } 
      24. 
  
  
  
  
    24. #btn_ok{ 
      25. 
  
  
  
  
    25.     margin-top: 10px; 
      26. 
  
  
  
  
    26.     margin-right: 20px; 
      27. 
  
  
  
  
    27. } 
      28. 
  
  
  
  
    28. #show{ 
      29. 
  
  
  
  
    29.     margin-top: 10px; 
      30. 
  
  
  
  
    30.     color: red; 
      31. 
  
  
  
  
    31. } 
      32.

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

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

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

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

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

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

    JavaScript

    1.获取元素操作的对象

     
 
 
 
      
  
  
  
  
    1. function $(id){ 
      2. 
  
  
  
  
    2.     return document.getElementById(id); 
      3. 
  
  
  
  
    3. } 
      4.

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

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

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

     
 
 
 
      
  
  
  
  
    1. function addBlur(m){ 
      2. 
  
  
  
  
    2.     m.onblur=function(){ 
      3. 
  
  
  
  
    3.         isEmpty(this); 
      4. 
  
  
  
  
    4.     } 
      5. 
  
  
  
  
    5. } 
      6.

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

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

     
 
 
 
      
  
  
  
  
    1. window.onload=function(){ 
      2. 
  
  
  
  
    2.     addBlur($('user')); 
      3. 
  
  
  
  
    3.     addBlur($('pwd')); 
      4. 
  
  
  
  
    4. } 
      5.

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

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

    4.检验表单是不是为空

     
 
 
 
      
  
  
  
  
    1. function isEmpty(m){ 
      2. 
  
  
  
  
    2.     if(m.value===''){ 
      3. 
  
  
  
  
    3.         $('show').style.display='block'; 
      4. 
  
  
  
  
    4.         $('show').innerHTML='您输入的内容不能为空！'; 
      5. 
  
  
  
  
    5.     }else{ 
      6. 
  
  
  
  
    6.         $('show').style.display='none'; 
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8.     } 
      9. 
  
  
  
  
    9. } 
      10.

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

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

     
 
 
 
      
  
  
  
  
    1. $('btn_ok').onclick=function(){ 
      2. 
  
  
  
  
    2.     if(($('user').value=='abc')&&($('pwd').value=='123')){ 
      3. 
  
  
  
  
    3.         $('show').style.display='block'; 
      4. 
  
  
  
  
    4.         $('show').innerHTML='登录成功！'; 
      5. 
  
  
  
  
    5.     }else{ 
      6. 
  
  
  
  
    6.         $('show').style.display='block'; 
      7. 
  
  
  
  
    7.         $('show').innerHTML='账号或密码错误！'; 
      8. 
  
  
  
  
    8.     } 
      9. 
  
  
  
  
    9. } 
      10.

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

    效果图如下所示:

    五、总结

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

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

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


    分享名称：浅析JavaScript的用户登录表单-焦点事件
    分享路径：http://cdxtjz.cn/article/cogspdh.html

    其他资讯