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

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

news 2025/12/15 7:40:43

文章目录

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

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/12/9 1:32:01

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/12/13 1:41:58

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/10/28 23:14:00

微服务商城-商品微服务

数据表 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/12/9 4:34:53

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/11/27 17:18:52

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/12/9 6:32:26

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/11/30 2:35:09