当前位置： 首页 > news >正文

jQuery 用户登录页面非空校验与登录测试

news 2026/5/18 14:19:47

文章目录

  • 实战介绍
  • 准备工作
  • 创建网页
  • 导入样式表和jQuery库
  • 编写页面代码
  • 编写脚本代码
  • 创建成功页面
  • 浏览网页和测试
  • 结束语

在这里插入图片描述

实战介绍

大家好，今天我们将一起学习如何使用jQuery来为用户登录页面进行非空校验和登录测试。通过这个实战项目，你将学会如何通过jQuery处理表单提交事件，进行输入验证，并根据验证结果进行相应的页面跳转。

准备工作

在开始之前，请确保你已经安装了一个文本编辑器和一个现代浏览器。你还需要了解基本的HTML和JavaScript知识。

创建网页

  1. 在你的工作目录D:\profession_skills_training\下创建一个新的HTML文件，命名为jquery_login.html。

导入样式表和jQuery库

  1. 在jquery_login.html文件中，首先导入必要的样式表和jQuery库。
<link rel="stylesheet" href="login.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

编写页面代码

  1. 接着，编写登录页面的HTML结构，包括账号和密码输入框以及登录和重置按钮。
<body><h3>用户登录</h3><form action="#" method="post"><table border="1" cellpadding="10" align="center"><tr><td>账号</td><td><input type="text" id="username" name="username" placeholder="请输入用户名"></td></tr><tr><td>密码</td><td><input type="password" id="password" name="password" placeholder="请输入密码"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="登录"><input type="reset" value="重置"></td></tr></table></form>
</body>

编写脚本代码

  1. 在jquery_login.html文件中，编写jQuery脚本代码，用于处理表单提交事件，进行非空校验，并根据用户名和密码的正确性进行页面跳转。
<script>$(document).ready(function() {$('form').submit(function(e) {      e.preventDefault();let username = $('#username').val();let password = $('#password').val();if (username == "") {alert("用户名不能为空~");$('#username').focus();} else if (password == "") {alert("密码不能为空~");$('#password').focus();} else if (username == 'admin' && password == '123456') {// 登录成功后跳转到成功页面window.location.href = 'success.html';} else {alert('用户名或密码错误~');}});});			
</script>

创建成功页面

  1. 创建一个简单的成功页面success.html，用于显示登录成功后的信息。

浏览网页和测试

  1. 保存你的HTML文件，并在浏览器中打开它。进行以下测试：
    • 非空校验：不输入用户名和密码，或只输入用户名不输入密码，然后单击登录按钮。
    • 登录测试：输入正确的用户名和密码，以及错误的用户名或密码，然后单击登录按钮。

结束语

通过这个实战演练，你已经学会了如何使用jQuery进行表单的非空校验和登录测试。这是前端开发中的一项重要技能，希望你能够在实际项目中灵活运用。如果你有任何问题，欢迎随时提问。祝你学习愉快！

相关文章：

jQuery 用户登录页面非空校验与登录测试

文章目录 实战介绍准备工作创建网页导入样式表和jQuery库编写页面代码编写脚本代码创建成功页面浏览网页和测试结束语 实战介绍 大家好&#xff0c;今天我们将一起学习如何使用jQuery来为用户登录页面进行非空校验和登录测试。通过这个实战项目&#xff0c;你将学会如何通过jQ…...

编程日记 2024/10/13 1:14:53

《Linux从小白到高手》综合应用篇：深入理解Linux进程调优

本篇深入介绍Linux进程调优. 1. Linux系统进程类型&#xff1a; Linux的进程可能有成千上万个&#xff1a; ‌新建状态‌&#xff1a;进程刚刚被创建&#xff0c;但尚未运行。 ‌就绪状态‌&#xff1a;进程已经准备好运行&#xff0c;等待CPU分配。 ‌运行状态‌&#xff1…...

编程日记 2024/10/13 1:13:51

Linux安装elasticsearch单机版

下载地址&#xff1a; Download Elasticsearch | Elastic 下载的安装包是elasticsearch-7.12.0-linux-x86_64.tar.gz 解压缩文件 tar -zxvf elasticsearch-7.12.0-linux-x86_64.tar.gz #编辑文件 vim config/elasticsearch.yml# 加入如下配置 # 集群名称&#xff0c;一个…...

编程日记 2024/10/13 1:12:50

el-table表头加红色星标

代码&#xff1a; <el-table-column prop"name" label"姓名" width"auto"><template #header><span style"color: red; margin-right: 4px">*</span><span>姓名</span></template></el…...

编程日记 2024/10/13 1:11:49

2.1 HTML5 - Canvas标签

文章目录 引言Canvas标签概述定义实例&#xff1a;创建画布 理解Canvas坐标系概述实例&#xff1a;获取Canvas坐标 获取Canvas环境上下文概述实例&#xff1a;获取Canvas环境上下文设置渐变色效果 结语 引言 大家好&#xff0c;今天我们要一起探索HTML5中一个非常有趣且强大的…...

编程日记 2024/10/13 1:10:48

T-Box联网安全定义

T-Box&#xff0c;即Telematics BOX&#xff0c;也称远程信息处理控制单元&#xff08;Telematics Control Unit&#xff0c;TCU&#xff09;&#xff0c;是车联网中的重要组成部分。它集成了GPS、外部通信接口、电子处理单元、微控制器、移动通信单元和存储器等功能模块&#…...

编程日记 2024/10/13 1:08:47

7. 整数反转【数学】

文章目录 7. 整数反转解题思路Go代码 7. 整数反转 7. 整数反转 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [ − 2 31 , 2 31 − 1 ] [−2^{31}, 2^{31} − 1] [−231,231−1] &#xff0…...

编程日记 2024/10/13 1:07:46

Windows环境NodeJS下载配置安装运行

Windows环境NodeJS下载配置安装运行 &#xff08;1&#xff09;下载 Node.js — Run JavaScript Everywhere 安装文件。 一路傻瓜式安装。 如果安装正常&#xff0c;输入命令可显示版本号&#xff1a; &#xff08;2&#xff09;可以查询nodejs默认的后续依赖安装包位置及缓存…...

编程日记 2024/10/13 1:06:44

石化巡检必备神器，AORO A30防爆手机让“跑冒滴漏”无处藏身！

在石油化工企业生产现场&#xff0c;设备种类繁多&#xff0c;巡检项目错综复杂&#xff0c;任何微小的疏忽都可能引发严重的安全事故。遨游通讯推出了AORO A30防爆手机&#xff0c;精准定位细微故障&#xff0c;在源头上有效控制或消除“跑冒滴漏”等安全隐患。 AORO A30防爆手…...

编程日记 2024/10/13 1:03:41

Smartfusion2开发环境的搭建

Libero软件安装包括libero安装、bibero补丁安装、bibero的license添加和官方ip库的添加等4部分内容组成。具体内容如下所示&#xff1a; 1 Libero软件安装 1、解压LiberoSoC_v11.8的安装包到当前目录&#xff0c;然后运行Libero中的可执行软件进行安装&#xff1b; 图1 双击l…...

编程日记 2024/10/13 1:00:38

使用C++编写一个语音播报时钟（Qt）

要求&#xff1a;当系统时间达到输入的时间时&#xff0c;语音播报对话框中的内容。定时可以取消。qt界面如上图所示。组件如下&#xff1a; countdownEdit作为书写目标时间的line_edit start_btn作为开始和停止的按钮 stop_btn作为取消的按钮 systimelab显示系统时间的lab tex…...

编程日记 2024/10/13 0:55:31

架构师之路-学渣到学霸历程-11

权限管理 我们可以通过一下命令来了解Linux的用户权限&#xff1b; Linux的用户权限真的涉及得非常好&#xff0c;让我们了解一下用户权限的知识吧&#xff1b; let’s go go go~&#xff01; chmod命令&#xff1a; 作用&#xff1a;变更文件或者目录的权限语法&#xff1a…...

编程日记 2024/10/13 0:54:27

Java Mail腾讯企业邮箱或其他邮箱发送邮件失败bug记录

问题出现情况 邮件发送时debug用F8逐步运行可以成功发送邮件&#xff0c;但是用F9或者直接运行程序却发送失败未开启mail的debug模式的报错日志是下面这个&#xff1a;org.springframework.mail.MailAuthenticationException: Authentication failed; nested exception is java…...

编程日记 2024/10/13 0:53:26

【大数据】HBase集群断电文件坏块导致集群无法启动处理

hfile文件有坏块 Corrupt文件目录&#xff1a;/hbase/data/… HBase异常&#xff1a;region无法在正常上线&#xff0c;http://master:16010页面看region 一直处于transition状态 wal文件损坏 Corrupt文件目录&#xff1a;/hbase/oldWALs/…或/hbase/WALs/… HBase异常&…...

编程日记 2024/10/13 0:50:22

400行程序写一个实时操作系统（三）：Sparrow的学习方法

千里之行始于足下&#xff0c;为了让大家的学习更加事半功倍&#xff0c;笔者将会介绍RTOS的学习方法。 可能很多人拿到一份源码&#xff0c;就想通过各种方式搞懂它&#xff0c;例如抄代码或者读代码。 笔者认为&#xff0c;单纯抄一个实时操作系统是没有任何用处的。比如对…...

编程日记 2024/10/13 0:49:21

为什么人工智能用 Python？

人工智能领域倾向于使用Python&#xff0c;主要归因于Python的多个显著优势&#xff1a; 简洁性与可读性&#xff1a;Python的语法设计简洁明了&#xff0c;代码易于阅读和理解&#xff0c;这对于涉及复杂算法和逻辑的人工智能项目尤为重要。它降低了编程门槛&#xff0c;使得…...

编程日记 2024/10/13 0:46:17

【C++差分数组】P1672何时运输的饲料

本文涉及知识点 C差分数组 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 P1672何时运输的饲料 原文比较啰嗦&#xff0c;我简述一下&#xff1a; 第x天运来F1(1<F1<1e6)千克的饲料&#xff0c;第D&#xff08;1<2e3)天还剩F2&…...

编程日记 2024/10/13 0:45:16

Go基础知识：切片

数组 Go 数组的大小是固定的&#xff0c;其长度是其类型的一部分&#xff08;[4]int并且[5]int是不同的、不兼容的类型&#xff09; var a [10]intb : [2]string{"Penn", "Teller"} b : [...]string{"Penn", "Teller"}package maini…...

编程日记 2024/10/13 0:43:13

Redis配置篇 - 指定Redis配置的三种方式，以及Redis配置文件介绍

文章目录 1 指定Redis配置的三种方式1.1 通过命令行参数来指定Redis配置1.2 通过配置文件来指定Redis配置1.3 在服务器运行时更​​改 Redis 配置 2 关于Redis配置文件 1 指定Redis配置的三种方式 1.1 通过命令行参数来指定Redis配置 在redis启动时&#xff0c;可以直接通过命…...

编程日记 2024/10/13 0:42:12

探索scikit-learn的datasets模块：数据集的加载与使用

引言 在机器学习和数据分析领域&#xff0c;数据集的选择和准备是至关重要的一步。scikit-learn库的datasets模块为我们提供了多种内置的数据集&#xff0c;方便我们进行模型训练和测试。这些数据集既有大型的数据集&#xff0c;也有便于教学和初步探索的小型数据集。本文将重…...

编程日记 2024/10/13 0:40:09

别再被Word折磨了！百考通AI让你像“玩填空”一样搞定本科论文

论文写作不再是一座孤岛&#xff0c;而是一次有条不紊的旅程 又到了一年毕业季&#xff0c;朋友圈里开始交替出现两种状态&#xff1a;一种是晒答辩通过、手捧鲜花与导师合影的“上岸”喜讯&#xff0c;另一种则是深夜凌晨发出的、配着空白 Word 文档截图的“崩溃文学”。 “开…...

编程新知 2026/5/18 14:19:42

Visual C++运行库终极指南：如何3分钟解决Windows软件启动失败问题

Visual C运行库终极指南&#xff1a;如何3分钟解决Windows软件启动失败问题 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 你是否曾经遇到过这样的场景&#xf…...

编程新知 2026/5/18 11:52:00

高光谱数据处理避坑指南：从RAW文件到反射率，你的白板校正做对了吗？

高光谱数据处理避坑指南&#xff1a;从RAW文件到反射率&#xff0c;你的白板校正做对了吗&#xff1f; 在实验室里&#xff0c;一位研究员盯着屏幕上扭曲的反射率曲线皱起了眉头——明明按照标准流程采集了白板和暗电流数据&#xff0c;为什么最终结果会出现负值和异常波动&am…...

编程新知 2026/5/18 11:20:04

从SDRAM到DDR3：给FPGA开发者的内存进化史与选型避坑指南

从SDRAM到DDR3&#xff1a;FPGA开发者的内存技术演进与实战选型策略 在FPGA开发中&#xff0c;外部存储器的选择往往决定了整个系统的性能上限。当面对OV5640摄像头每秒数百兆的像素数据流&#xff0c;或是高速ADC采集的连续波形时&#xff0c;一个不合适的内存选型可能导致系统…...

编程新知 2026/5/18 11:17:46

Hitboxer终极指南：专业级游戏键盘重映射与SOCD清理工具完全教程

Hitboxer终极指南&#xff1a;专业级游戏键盘重映射与SOCD清理工具完全教程 【免费下载链接】socd Key remapper for epic gamers 项目地址: https://gitcode.com/gh_mirrors/so/socd Hitboxer是一款专为竞技游戏玩家设计的专业级键盘按键重映射和SOCD清理工具&#xff…...

编程新知 2026/5/17 9:24:51

Godot卡牌游戏框架终极指南：3小时从零构建专业级卡牌游戏

Godot卡牌游戏框架终极指南&#xff1a;3小时从零构建专业级卡牌游戏 【免费下载链接】godot-card-game-framework A framework which comes with prepared scenes and classes to kickstart your card game, as well as a powerful scripting engine to use to provide full r…...

编程新知 2026/5/17 9:14:34

3个步骤让Windows任务栏图标居中，打造macOS般的桌面体验

3个步骤让Windows任务栏图标居中&#xff0c;打造macOS般的桌面体验 【免费下载链接】TaskbarX Center Windows taskbar icons with a variety of animations and options. 项目地址: https://gitcode.com/gh_mirrors/ta/TaskbarX 你是否厌倦了Windows任务栏图标总是靠左…...

编程新知 2026/5/17 8:36:59

Windows Cleaner终极指南：3分钟彻底解决C盘爆红问题！

Windows Cleaner终极指南&#xff1a;3分钟彻底解决C盘爆红问题&#xff01; 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 还在为Windows系统越用越慢而烦恼吗&…...

编程新知 2026/5/18 10:17:24

Windows Android子系统深度优化：WSABuilds项目架构解析与实战部署指南

Windows Android子系统深度优化&#xff1a;WSABuilds项目架构解析与实战部署指南 【免费下载链接】WSABuilds Run Windows Subsystem For Android on your Windows 10 and Windows 11 PC using prebuilt binaries with Google Play Store (MindTheGapps) and/or Magisk or Ker…...

编程新知 2026/5/17 6:53:16

怎么判断一家工厂还在不在正常生产？6 类活跃度信号，从纸面到现场

跑工厂的销售员都遇到过这种事&#xff1a;手机里存着一份名单&#xff0c;导航开两小时&#xff0c;到门口才发现卷帘门焊死、车间长草、保安说"厂子去年就搬了"。 问题出在哪&#xff1f;大多数人判断"这家工厂在不在"&#xff0c;靠的是工商登记——执照…...

编程新知 2026/5/18 6:58:16