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

html+js+css登录注册界面

news 2026/2/7 21:46:19

拥有向服务器发送登录或注册数据并接收返回数据的功能      点赞关注

界面

588a2c28d5a24f1cbdf2195b2569be92.jpg

源代码

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login and Registration Form</title>
<style>
  * {
    box-sizing: border-box;
  }
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .container {
    width: 400px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  h2 {
    color: #e74c3c;
    text-align: center;
  }
  .form-group {
    margin-bottom: 20px;
  }
  label {
    display: block;
    margin-bottom: 5px;
    color: #333;
  }
  input[type="text"],
  input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  button {
    width: 100%;
    padding: 10px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #d93c2c;
  }
  .switch {
    text-align: center;
    color: #999;
  }
  .switch a {
    color: #e74c3c;
    text-decoration: none;
  }
  .error {
    color: red;
    margin-top: 5px;
    display: none;
  }
</style>
</head>
<body>
<div class="container" id="loginForm">
  <h2>登录</h2>
  <div class="form-group">
    <label for="loginUsername">用户名</label>
    <input type="text" id="loginUsername" required>
  </div>
  <div class="form-group">
    <label for="loginPassword">密码</label>
    <input type="password" id="loginPassword" required>
    <span class="error" id="loginError"></span>
  </div>
  <button οnclick="validateAndSubmit('login')">登录</button>
  <div class="switch">
    没有账号? <a href="#" οnclick="switchForm('register')">注册</a>
  </div>
</div>

<!-- Hidden register form -->
<div class="container" id="registerForm" style="display: none;">
  <h2>注册</h2>
  <div class="form-group">
    <label for="registerUsername">用户名</label>
    <input type="text" id="registerUsername" required>
  </div>
  <div class="form-group">
    <label for="registerPassword">密码</label>
    <input type="password" id="registerPassword" required>
    <span class="error" id="registerError"></span>
  </div>
  <button οnclick="validateAndSubmit('register')">注册</button>
  <div class="switch">
    已有账号? <a href="#" οnclick="switchForm('login')">登录</a>
  </div>
</div>

<script>
function switchForm(formType) {
  document.getElementById('loginForm').style.display = formType === 'login' ? 'block' : 'none';
  document.getElementById('registerForm').style.display = formType === 'register' ? 'block' : 'none';
}

function validatePassword(password) {
  const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/;
  return regex.test(password);
}

function validateAndSubmit(action) {
  let username, password, errorElement;
  if (action === 'login') {
    username = document.getElementById('loginUsername').value;
    password = document.getElementById('loginPassword').value;
    errorElement = document.getElementById('loginError');
  } else {
    username = document.getElementById('registerUsername').value;
    password = document.getElementById('registerPassword').value;
    errorElement = document.getElementById('registerError');
  }

  if (!username || !password) {
    errorElement.textContent = "请填写所有";
    errorElement.style.display = "block";
    return;
  }

  if (!validatePassword(password)) {
    errorElement.textContent =  "密码中必须包含大写小写字母数字特殊符号，且密码长度大于六位";
    errorElement.style.display = "block";
    return;
  }

  errorElement.style.display = "none";

  const data = new FormData();
  data.append('username', username);
  data.append('password', password);

  fetch('/api/' + action, {
    method: 'POST',
    body: data
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
    alert('正确!');
  })
  .catch(error => {
    console.error(error);
    alert('错误失败');
  });
}
</script>
</body>
</html>

相关文章：

html+js+css登录注册界面

拥有向服务器发送登录或注册数据并接收返回数据的功能 点赞关注 界面 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>Login and Registration Form</title> <style> * …...

编程日记 2024/7/3 21:29:31

英伟达（NVIDIA）数据中心GPU介绍

英伟达&#xff08;NVIDIA&#xff09;数据中心GPU按性能由高到低排行&#xff1a; 1. NVIDIA H100 架构&#xff1a;Hopper 核心数量&#xff1a;18352 CUDA Cores, 1456 Tensor Cores 显存&#xff1a;80 GB HBM3 峰值性能&#xff1a; 单精度&#xff08;FP32&#xff09…...

编程日记 2024/7/3 21:28:30

Leetcode 3202. Find the Maximum Length of Valid Subsequence II

Leetcode 3202. Find the Maximum Length of Valid Subsequence II 1. 解题思路2. 代码实现 题目链接&#xff1a;3202. Find the Maximum Length of Valid Subsequence II 1. 解题思路 这一题的话是上一题3201. Find the Maximum Length of Valid Subsequence I的升级版&am…...

编程日记 2024/7/3 21:27:29

通过Spring Boot结合实时流媒体技术对考试过程进行实时监控

本章将深入探讨考试系统中常见的复杂技术问题&#xff0c;并提供基于Spring Boot 3.x的解决方案。涵盖屏幕切换检测与防护、接打电话识别处理、行为监控摄像头使用、网络不稳定应对等&#xff0c;每篇文章详细剖析问题并提供实际案例与代码示例&#xff0c;帮助开发者应对挑战&…...

编程日记 2024/7/3 21:26:28

智能扫地机器人避障与防跌落问题解决方案

智能扫地机器人出现避障与防跌落问题时&#xff0c;可以通过以下几种方式来解决&#xff1a; 一、避障问题的解决方案 1.升级避障技术&#xff1a; ①　激光雷达避障&#xff1a;激光雷达通过发射和接收激光信号来判断与障碍物的距离&#xff0c;具有延迟低、效果稳定、准确度…...

编程日记 2024/7/3 21:22:24

德旺训练营称重问题

这是考小学的分治策略&#xff0c;小学的分治策略几乎都是分三组。本着这个策略&#xff0c;我们做看看。 第一次称重&#xff1a; 分三组&#xff0c;16,16,17&#xff0c;拿两个16称&#xff0c;得到A情况&#xff0c;一样重&#xff0c;那么假铜钱在那组17个里面。B情况不…...

编程日记 2024/7/3 21:21:23

数据决策系统详解

文章目录 数据决策系统的核心组成部分&#xff1a;1. **数据收集与整合**&#xff1a;2. **数据处理与分析**&#xff1a;3. **数据可视化**&#xff1a;4. **决策支持**&#xff1a; 数据决策系统的功能&#xff1a;决策类型&#xff1a;数据决策系统对企业的重要性&#xff1…...

编程日记 2024/7/3 21:20:22

JSON 简述与应用

1. JSON 简述 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;常用于客户端与服务器之间的数据传递。它基于JavaScript对象表示法&#xff0c;但独立于语言&#xff0c;可以被多种编程语言解析和生成。 1.1 特点 轻量级&#…...

编程日记 2024/7/3 21:18:20

ResNet50V2

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、ResNetV1和ResNetV2的区别 ResNetV2 和 ResNetV1 都是深度残差网络&#xff08;ResNet&#xff09;的变体&#xff0c;它们的主要区别在于残差块的设计和…...

编程日记 2024/7/3 21:15:18

基于深度学习的虚拟换装

基于深度学习的虚拟换装技术旨在通过计算机视觉和图像处理技术&#xff0c;将不同的服装虚拟地穿在用户身上&#xff0c;实现快速的试穿和展示。这项技术在电商、时尚和虚拟现实领域具有广泛的应用&#xff0c;能够提升用户体验&#xff0c;增加互动性。以下是关于这一领域的系…...

编程日记 2024/7/3 21:14:17

单段时间最优S型速度规划算法

一&#xff0c;背景 在做机械臂轨迹规划的单段路径的速度规划时&#xff0c;除了参考《Trajectory Planning for Automatic Machines and Robots》等文献之外&#xff0c;还在知乎找到了这位大佬 韩冰 写的在线规划方法&#xff1a; https://zhuanlan.zhihu.com/p/585253101/e…...

编程日记 2024/7/3 21:12:15

pom文件-微服务项目结构

一、微服务项目结构 my-microservices-project/ ├── pom.xml <!-- 父模块的pom.xml --> ├── ry-system/ │ ├── pom.xml <!-- 子模块ry-system的pom.xml --> │ └── src/main/java/com/example/rysystem/ │ └── RySystemApplication.…...

编程日记 2024/7/3 21:11:14

解析Kotlin中的Nothing【笔记摘要】

1.Nothing的本质 Nothing 的源码很简单&#xff1a; public class Nothing private constructor()可以看到它是个class&#xff0c;但它的构造函数是 private 的&#xff0c;这就导致我们没法创建它的实例&#xff0c;并且在源码里 Kotlin 也没有帮我们创建它的实例。 基于这…...

编程日记 2024/7/3 21:10:13

toRefs 和 toRef

文章目录 toRefs 和 toReftoRefstoRef toRefs 和 toRef toRefs toRefs 把一个由reactive对象的值变为一个一个ref的响应式的值 import { ref, reactive, toRefs, toRef } from vue; let person reactive({name: 张三,age: 18, }); // toRefs 把一个由reactive对象的值变为一…...

编程日记 2024/7/3 21:09:12

Vision Transformer论文阅读笔记

目录 An Image is Worth 16x16 Words: Transformers for Image Recognition at Scale -- Vision Transformer摘要Introduction—简介RELATED WORK—相关工作METHOD—方法VISION TRANSFORMER (VIT)—视觉Transformer(ViT) 分析与评估PRE-TRAINING DATA REQUIREMENTS—预训练数据…...

编程日记 2024/7/3 21:06:08

MapReduce的执行流程排序

MapReduce 是一种用于处理大规模数据集的分布式计算模型。它将作业分成多个阶段&#xff0c;以并行处理和分布式存储的方式来提高计算效率。以下是 MapReduce 的执行流程以及各个阶段的详细解释&#xff1a; 1. 作业提交&#xff08;Job Submission&#xff09; 用户通过客户端…...

编程日记 2024/7/3 21:04:05

雅思词汇及发音积累 2024.7.3

银行 check &#xff08;美&#xff09;支票 cheque /tʃek/ &#xff08;英&#xff09;支票 ATM 自动取款机 cashier 收银员 teller /ˈtelə(r)/ &#xff08;银行&#xff09;出纳员 loan 贷款 draw/withdraw money 提款 pin number/passsword/code …...

编程日记 2024/7/3 21:03:04

Vue2和Vue3的区别Vue3的组合式API

一、Vue2和Vue3的区别 1、创建方式的不同&#xff1a; &#xff08;1&#xff09;、vue2:是一个构造函数&#xff0c;通过该构造函数创建一个Vue实例 new Vue({})&#xff08;2&#xff09;、Vue3:是一个对象。并通过该对象的createApp()方法&#xff0c;创建一个vue实例。 Vue…...

编程日记 2024/7/3 21:02:03

ML307R OpenCPU HTTP使用

一、函数介绍 二、示例代码 三、代码下载地址 一、函数介绍 具体函数可以参考cm_http.h文件，这里给出几个我用到的函数 1、创建客户端实例 /*** @brief 创建客户端实例** @param [in] url 服务器地址（服务器地址url需要填写完整，例如（服务器url仅为格式示…...

编程日记 2024/7/3 21:01:02

【状态估计】线性高斯系统的状态估计——离散时间的递归滤波

前两篇文章介绍了离散时间的批量估计、离散时间的递归平滑&#xff0c;本文着重介绍离散时间的递归滤波。 前两篇位置&#xff1a;【状态估计】线性高斯系统的状态估计——离散时间的批量估计、【状态估计】线性高斯系统的状态估计——离散时间的递归平滑。 离散时间的递归滤波…...

编程日记 2024/7/3 20:58:58

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2026/1/31 5:30:51

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2026/2/4 5:32:18

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...

编程新知 2025/11/17 12:44:07

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

编程新知 2026/2/1 11:11:34

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/10/2 7:24:40