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

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

news 2025/11/6 11:13:38

文章目录

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/11/5 10:22:23

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/9/29 3:23:47

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/10/25 11:57:30

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/11/1 14:33:10

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/10/31 20:51:54

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/10/24 19:46:10

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/10/28 0:58:21

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/11/2 0:32:25

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2025/11/2 7:50:48