解决onblur()失去焦点事件在刚登陆页面(尚未有任何操作)时就触发的问题

news2024/12/23 23:14:26

文章目录

    • 一、原始错误:
      • 1.1 原始代码
      • 1.2 访问页面(仅访问页面,不进行任何操作)
    • 二、解决错误
      • 2.1 解决办法
      • 2.2 再次访问页面
        • 2.2.1 输入错误格式
        • 2.2.2 输入正确格式

最近笔者在编写代码时遇到刚访问页面,什么都没有操作,就使得输入框失去了焦点,触发了onblur()事件,在经过一系列搜索改正后,终于解决此问题,特在此记录。

一、原始错误:

1.1 原始代码

//验证用户名格式
    var usernameInputEle = document.getElementById("usernameInput");
    usernameInputEle.onblur=username_verification();
    function username_verification(){
        var username = usernameInputEle.value.trim();
        var regExp = new RegExp(/^[\w-]{4,16}$/);
        var flag = regExp.test(username);
        var usernameErrEle = document.getElementById("usernameErr");
        if(flag){
            usernameErrEle.style.display="none";
        }else{
            usernameErrEle.style.display="inline";
        }
        return flag;
    }

    //验证密码格式
    var passwordInputEle = document.getElementById("passwordInput");
    passwordInputEle.onblur=password_verification();
    function password_verification(){
        var password = passwordInputEle.value.trim();
        var regExp = new RegExp(/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/);
        var flag = regExp.test(password);
        var passwordErrEle = document.getElementById("passwordErr");
        if(flag){
            passwordErrEle.style.display="none";
        }else{
            passwordErrEle.style.display="inline";
        }
        return flag;
    }

1.2 访问页面(仅访问页面,不进行任何操作)

我们看到,onblur()事件直接触发,并且即使输出正确的格式,提示信息依然不会消失

在这里插入图片描述


二、解决错误

2.1 解决办法

解决办法很简单,传递函数时,不要加()即可,如下图所示

在这里插入图片描述


2.2 再次访问页面

我们看到,这次访问页面后,onblur()事件未直接触发

在这里插入图片描述


2.2.1 输入错误格式

在这里插入图片描述


2.2.2 输入正确格式

在这里插入图片描述


OK!!!问题解决!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/684133.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaWeb学习笔记-1

学习路线 Web开发–介绍(画大饼) 什么是Web? Web:全球广域网,也成为万维网,能通过浏览器访问的网站 Web网站的工作流程 网站大致是由三个部分组成的 第一部分就是我们能看到的网页程序,也叫做…

React 组件中怎么做事件代理

React 并不会把所有的处理函数直接绑定在真实的dom节点上,而是把所有的事件绑定到结构的最外层(合成事件层),使用一个统一的事件监听器,这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。 当组…

哈工大计算机网络课程网络层协议详解之:网络地址转换NAT

哈工大计算机网络课程网络层协议详解之:网络地址转换NAT 文章目录 哈工大计算机网络课程网络层协议详解之:网络地址转换NAT网络地址转换(NAT)NAT实现原理NAT穿透问题NAT穿透问题的解决方案 上一节中,我们在DHCP协议中介…

K 个一组翻转链表

反转链表是比较常出的一种题目,我们有简单难度的一整个链表翻转: private ListNode reverse(ListNode head){ListNode pre null;ListNode cur head;while(cur ! null){ListNode next cur.next;cur.next pre;pre cur;cur next;}return pre;}从第一…

GC说明与介绍,GC的垃圾回收算法有哪些

1、GC是什么 2、GC算法概述 JVM在进行GC时,并非每次都对上面三个内存区域一起回收的,大部分时候回收的都是指新生代。 因此GC按照回收的区域又分了两种类型,一种是普通GC(minor GC),一种是全局GC&#xff0…

【算法】行星碰撞机器人碰撞(栈的使用)

文章目录 行星碰撞机器人碰撞参考资料 本文记录了两个使用栈来处理碰撞问题的算法题目。 行星碰撞 https://leetcode.cn/problems/asteroid-collision/ 对于这种题目,各个元素分别会向左或向右移动,可以使用栈模拟碰撞的过程。 由于从左往右进行遍历…

Argis通过Python的Arcpy第三方库进行字段计算、批量将mxd导出为jpg图片、合并数据库

前言 近来公司有开发Arcgis脚本工具的需求,我就去学了一下用Arcpy来操作Arcgis的数据,今天学习了字段计算,将学习成果记录如下。 arcpy帮助文档传送门:https://resources.arcgis.com/zh-cn/help/main/10.2/ 一、字段计算 1、…

Linux学习之内核升级

wget --no-check-certificate https://mirrors.edge.kernel.org/pub/linux/kernel/v5.x/linux-5.1.14.tar.xz下载源代码。 yum install -y gcc gcc-c make ncurses-devel openssl-devel elfutils-libelf-devel安装必要的依赖包。 完成之后,显示如下: …

openEuler操作系统和openGauss数据库

文章目录 1. openEuler操作系统2. openGauss数据库2.1 系统自带库2.1.1 允许所有地址访问端口2.1.2 创建远程登录用户 2.2 安装5.0 版本2.2.1 下载2.2.2 安装2.2.3 测试 1. openEuler操作系统 镜像下载地址 https://www.openeuler.org/zh/download 选一个下载 安装 按提示安…

【kubernetes系列】Kubernetes中的重要概念(三)

在实际的工作中,我们使用Kubernetes 通常不会直接创建 Pod,而是通过 各种 Controller 来管理 Pod 的。Controller 中定义了 Pod 的部署特性,比如有几个副本,在什么样的 Node 上运行等。为了满足不同的业务场景,Kuberne…

VMware Workstation 17 的安装

一、简介 VMware Workstation 17.0是一款功能非常强大的虚拟机,可以帮助用户在Windows系统上同时开启多个系统,不仅能在虚拟机上安装上不同的操作系统,比如Mac、Linux以及Windows10/11等,还能与云技术和容器技术(如 D…

【金融量化】ETF基金是什么?有什么特点?

1 含义 ETF(交易型开放式指数基金)是以某一选定的指数所包含的成分证券或商品为投资对象,依据构成指数的证券或商品的种类和比例,采取完全复制或抽样复制,进行被动投资的指数基金。ETF不但具有传统指数基金的全部特色…

vue导出excle单sheet文字居中表头加粗显示

效果图: 首先下载依赖 npm install xlsx --save npm install xlsx-style --save在需要导出excle的vue文件中导入依赖 import XLSX from "xlsx" import XLSXStyle from xlsx-style在method中定义 methods:{// 格式化formatJson(filterVal, jsonData)…

月近万次发布,故障率<4‰如何做到?去哪儿测试左移重难点揭秘!

一分钟精华速览 去哪儿发布的数据显示,在过去一年中,其发布故障率始终保持在 4‰ 以下并不断降低。作为一家出行旅游服务平台,去哪儿网如何在复杂的业务场景下,仍能保持如此低的故障率?其中功能测试左移功不可没。 本…

高质量编程-编码规范之代码格式和注释

前言: \textcolor{Green}{前言:} 前言: 💞这个专栏就专门来记录一下寒假参加的第五期字节跳动训练营 💞从这个专栏里面可以迅速获得Go的知识 本次文章不仅仅是在 go 中主要注意,在编写其他语言中也同样重要…

单片机介绍选型(嵌入式学习)

单片机介绍&选型 单片机介绍常见的单片机单片机如何选型 单片机介绍 单片机(Microcontroller)是一种集成电路芯片,具有处理器核心、存储器、输入/输出接口和各种外设的功能。 单片机是单片微型计算机的简称,MCU是Microcontro…

15. WebGPU 相机

在上一篇文章中,我们必须将 F 移到视锥体前面,因为 mat4.perspective 函数 将眼睛放在原点 (0, 0, 0) 并且把对象 放到 位于眼前 -zNear 到 -zFar 之间的视锥体中。这意味着,任何想要显示的东西,都需要放在这个空间里。 在现实世…

对英雄联盟英雄属性数据的预处理及相似度矩阵计算

目录 一、引言 二、任务1 1、填充缺失值 2、用中位数填充“生命值”属性列缺失值 3、 用均值填充“生命值”属性列缺失值 三、任务2 注:英雄联盟英雄属性数据资源可在博客资源中自行获取。 一、引言 英雄联盟作为一款古早的刀塔游戏,可谓之刀塔游…

jumpserver-v2.2.2【部署教程】

目录 什么是 跳板机 跳板机的缺点 使用堡垒机的优势 jumpserver的组件 【1】时间同步 【2】安装依赖 【3】修改数据库字符集、创建远程用户 【4】创建python的虚拟环境,用于专门运行jumpserver的环境 【5】获取jumpserver的代码 【6】安装编译环境依赖 …

【管理系列-09】软件成本怎么评估,知己知彼才能做软件造价

项目来了,总要叫来几个人,讨论一下成本是多少,能不能接,作为研发经理,能够较为合理的评估成本是一项必备技能,如何科学合理的评估,达到对内对外都满意,我想这是每个研发经理的必修课…