JS实现对用户名、密码进行正则表达式判断,按钮绑定多个事件,网页跳转

目标:使用JS实现对用户名和密码进行正则表达式判断,用户名和密码正确时,进行网页跳转。

用户名、密码的正则表达式检验

HTML代码:

<button type="submit" id="login-btn" /*onclick="login();alidateLogin();"*/ onblur="checkusernameandpassword()">登录</button>

为button标签添加一个聚焦事件 :οnblur="checkusernameandpassword()"

当输入完成后,点击其他地方,就能进行判断,如果用户名和密码都符合,则在控制台输出“用户名和密码合法”,否则输出“用户名和密码不合法”

JS代码:

/* 使用正则表达式验证登录时的用户名和密码是否合法 */  
function checkusernameandpassword() {const username = document.querySelector('#login-username').value;const password = document.querySelector('#login-password').value;const usernameRegex = /^[a-zA-Z0-9_-]{5,15}$/;const passwordRegex = /^[a-zA-Z0-9_-]{5,15}$/;if (usernameRegex.test(username) && passwordRegex.test(password)) {console.log('用户名和密码合法');return true;} else {console.log('用户名或密码不合法');return false;}
} 

JS实现一个按钮绑定两个onclick事件

HTML代码:

<button type="submit" id="login-btn" /*onclick="login();alidateLogin();"*/ onblur="checkusernameandpassword()">登录</button>

 不在button中绑定onclick事件,而是使用id属性绑定JS函数进行绑定多个onclick事件

JS代码:

/* 一个按钮绑定两个事件 */  
var btn = document.getElementById("login-btn");
btn.addEventListener("click", login);
btn.addEventListener("click", validateLogin);

 获取id为login-btn的元素,对该元素添加事件,点击触发,分别为login()、validateLogin()

模拟登录实现: 

HTML代码:

<button type="submit" id="login-btn" /*onclick="login();alidateLogin();"*/ onblur="checkusernameandpassword()">登录</button>

JS代码:

/* 登录时验证用户名和密码 */  
function validateLogin() {const username = document.querySelector('#login-username').value;const password = document.querySelector('#login-password').value;if (username === 'admin' && password === '123456') {console.log('登录成功');window.location.href = 'index.html';return true;} else {console.log('登录失败');return false;}
} 

 只有用户名为:admin    且密码为:123456 

才能实现登录。

登录成功时,执行window.location.href = '跳转页面地址'

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

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

相关文章

探索企业微信助手工具:强化沟通协作,助力高效办公

随着企业信息化建设的深入发展&#xff0c;企业微信助手工具作为一种集成化、智能化的办公辅助工具&#xff0c;正逐渐受到企业的青睐。企业微信助手不仅能够帮助企业提高工作效率&#xff0c;还能增强沟通协作能力&#xff0c;为企业发展注入新的活力。本文将简要介绍企业微信…

精益思想赋能数字化转型:落地策略与实践路径

当下&#xff0c;数字化转型已不再是选择题&#xff0c;而是关乎企业生存与发展的必答题。然而&#xff0c;转型过程中如何确保效率、降低成本并快速实现价值创造&#xff0c;成为了摆在众多企业面前的难题。精益思想作为一种追求精益求精、持续改进的管理思维&#xff0c;为数…

2024最新版JavaScript逆向爬虫教程-------基础篇之面向对象

目录 一、概念二、对象的创建和操作2.1 JavaScript创建对象的方式2.2 对象属性操作的控制2.3 理解JavaScript创建对象2.3.1 工厂模式2.3.2 构造函数2.3.3 原型构造函数 三、继承3.1 通过原型链实现继承3.2 借用构造函数实现继承3.3 寄生组合式继承3.3.1 对象的原型式继承3.3.2 …

Linux 抽象命名空间(Abstract Namespace)详细介绍

Linux 抽象命名空间&#xff08;Abstract Namespace&#xff09;是 Unix 域套接字&#xff08;Unix Domain Socket, UDS&#xff09;家族中的一种特殊类型&#xff0c;用于进程间通信&#xff08;IPC&#xff09;。相比于传统的 Unix 域套接字&#xff08;文件系统命名空间和临…

stm32HAL库-GPIO

一 什么是 GPIO: GPIO(general porpose intput output), 通用输入输出端口 . 二 我们先认识芯片控制 GPIO 输出控制。 2.1LED 硬件原理如图&#xff1a; 当电流从这根电线流通&#xff0c; LED 亮。当电流不通过这根电线&#xff0c; LED 灭。 上面 PF** &#xff0c;芯片电…

MySQL面试——聚簇/非聚簇索引

存储引擎是针对表结构&#xff0c;不是数据库 引擎层&#xff1a;对数据层以何种方式进行组织 update&#xff1a;加索引&#xff1a;行级锁&#xff1b;不加索引&#xff1a;表级锁

bootstrap带左右固定列表格,列选择操作后,表头和内容无法对其问题。

通过属性showColumns: true,开始列选择后&#xff0c; &#xff08;1&#xff09;列变动后&#xff0c;列总数量依然较多存在滚动轴时&#xff0c;右侧少一部分问题。 &#xff08;2) 列变动后&#xff0c;选择列数较少时&#xff0c;左右固定列消失&#xff0c;表头和表格无法…

固态继电器:推进可再生能源系统

随着可再生能源系统的发展&#xff0c;太阳能系统日益成为现代能源解决方案的先锋。在这种背景下&#xff0c;固态继电器&#xff08;SSR&#xff09;&#xff0c;特别是光耦固态继电器的利用变得日益突出。本文旨在深入探讨SSR在可再生能源系统中的多方位应用&#xff0c;重点…

【学习笔记】Python 使用 matplotlib 画图

文章目录 安装中文显示折线图、点线图柱状图、堆积柱状图坐标轴断点参考资料 本文将介绍如何使用 Python 的 matplotlib 库画图&#xff0c;记录一些常用的画图 demo 代码 安装 # 建议先切换到虚拟环境中 pip install matplotlib中文显示 新版的 matplotlib 已经支持字体回退…

SD-WAN:灵活、低成本、便于管理

近年来&#xff0c;SD-WAN&#xff08;软件定义广域网&#xff09;技术成为企业网络领域的新趋势&#xff0c;其带来的变革性影响备受瞩目。凭借出色的灵活性、高效的可管理性以及显著的成本优势&#xff0c;SD-WAN技术为企业网络注入了新的活力。 首先&#xff0c;SD-WAN技术的…

4- JavaScript对象

JavaScript对象 一、数组 数组(Array)是指一组数据的集合&#xff0c;其中的每个数据被称作元素&#xff0c;数组是属于内置对象&#xff0c;数组和普通对象的功能类似&#xff0c;都可以用来存储一些值。不同的是&#xff1a; 普通对象是使用字符串作为属性名&#xff0c;而…

前端HTML面试题:meta 元素都有什么

在HTML中&#xff0c;<meta> 元素是一个非常重要且常用的元素&#xff0c;它用于表示关于HTML文档的元数据&#xff08;metadata&#xff09;&#xff0c;这些元数据不会直接显示在页面上&#xff0c;但可以被浏览器以及其他网页服务利用。在前端开发的面试中&#xff0c…

如何利用diskpart命令界面在win10/win11上解除U盘写保护

背景 在把U盘作为系统盘装了一次后&#xff0c;惊讶的发现自己U盘的一个1M的小卷被写保护了。不能格式化&#xff0c;不能删除文件&#xff0c;在给用户拷文件的时候&#xff0c;小卷还会提示病毒告警&#xff0c;非常的尴尬&#xff0c;因此展开了研究。 失败的尝试 尝试了网…

Oracle expdp/impdp 及 exp/imp 命令详解

一、基础环境    操作系统&#xff1a;Windows 或 Linux 数据库版本&#xff1a;Oracle Database 11.2.0.1.0 及以上版本 二、命令简介    我们在使用Oracle 数据库的过程中会经常对数据进行导入导出。Oracle 数据库提供 expdp / impdp &#xff08;Data Pump&#xff0c…

58、回溯-组合总和

思路&#xff1a; 数组内的每一个元素都可以无线使用只要最后可以拼接成target就可以。那么如何限制呢&#xff1f; &#xff08;target-已经拼接的和 &#xff09;/当前元素 就是你可以利用的数量。代码如下&#xff1a; class Solution {public static List<List<I…

触发器的基本概念及分类

目录 触发器的基本概念 作用对象 触发事件 触发条件 触发时间 触发级别或者触发频率 触发器的分类 DML 触发器 INSTEAD OF 触发器 系统触发器 Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 触发器的基本概念 …

2024年电商视频号夏令营(第四期)零基础带你玩转微信视频号

教学内容&#xff1a; 下 载 地 址&#xff1a; laoa1.cn/1821.html 1.剪辑软件整套实例教程0基本一小时懂得视频编辑 1.上课前必看 1.如何获实拍视频的原创素材 2.怎样运送视频水印&#xff0c;提取图片文案脚本 2.如何发布爆款短视频 2.微信视频号基本功能解读 2.直播的时…

多路IO复用--epoll

文章目录 api触发方式service-epoll: api epoll_create(int size); // 创建epollepoll_ctl(int epfd,EPOLL_OP,sockfd,event)&#xff1b; // 设置epoll, EPOLL_OP, 为epll操作事件&#xff0c;对应的fdepoll_wait(epfd,events,length,0); // 将就绪队列从内核态到用户态 在内…

软件物料清单(SBOM)生成指南 .pdf

如今软件安全攻击技术手段不断升级&#xff0c;攻击数量显著增长。尤其是针对软件供应链的安全攻击&#xff0c;具有高隐秘性、追溯难的特点&#xff0c;对企业软件安全威胁极大。 同时&#xff0c;软件本身也在不断地更新迭代&#xff0c;软件内部成分安全性在持续变化浮动。…

第十二届蓝桥杯C/C++ B组 杨辉三角形(二分查找+思维)

3418. 杨辉三角形 - AcWing题库 题目描述: 思路&#xff1a; 从上图片中&#xff0c;我们可以看出来这是一个对称图形&#xff0c;所以我们只看左半部分就可以了&#xff0c;我们一行一列去做数据量是1e9这样会很麻烦&#xff0c;所以我们这里做一个思想转换&#xff0c;斜着…