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

html+js+css登录注册界面

news 2025/12/16 2:58:56

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

界面

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

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/12/15 19:58:03

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/12/14 11:06:45

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2025/12/15 13:24:52

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/12/11 16:21:02

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/12/13 23:42:56

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/12/9 20:17:56

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2025/12/11 8:08:57

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54