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

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

news 2026/2/7 15:48:52

文章目录

  • 实战介绍
  • 准备工作
  • 创建网页
  • 导入样式表和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

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/11/26 13:15:57

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/1/25 16:39:17

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2026/2/1 4:14:14

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2026/1/26 19:10:48

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2026/2/4 12:52:32

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2026/1/26 8:42:13

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2026/1/28 7:31:14

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2026/1/31 6:53:53