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

html+js+css登录注册界面

news 2026/5/28 19:03:46

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

界面

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

四旋翼变形控制：RL与MPC在混合动力学中的对比

1. 四旋翼变形控制的技术挑战与解决方案四旋翼变形控制&#xff08;Quadrotor Morpho-Transition&#xff09;是当前机器人领域最具挑战性的前沿技术之一。这项技术使机器人能够在空中完成形态变换&#xff0c;实现从飞行模式到地面模式的平滑切换。想象一下&#xff0c;一架四…...

编程新知 2026/5/26 4:52:25

终极键盘重映射解决方案：3分钟实现职业级游戏操作精度

终极键盘重映射解决方案&#xff1a;3分钟实现职业级游戏操作精度 【免费下载链接】socd Key remapper for epic gamers 项目地址: https://gitcode.com/gh_mirrors/so/socd 在激烈的游戏对抗中&#xff0c;你是否曾因键盘按键冲突而错失关键操作&#xff1f;当同时按下…...

编程新知 2026/5/25 22:34:33

MeloTTS实战：多语言语音合成的高效解决方案

MeloTTS实战&#xff1a;多语言语音合成的高效解决方案 【免费下载链接】MeloTTS High-quality multi-lingual text-to-speech library by MyShell.ai. Support English, Spanish, French, Chinese, Japanese and Korean. 项目地址: https://gitcode.com/GitHub_Trending/me/…...

编程新知 2026/5/25 22:18:24

全球无障碍宣传日：iOS 26 辅助功能大升级，这些实用小功能你用过吗？

辅助功能发展与升级很多人对辅助功能的印象还停留在 "小白点"&#xff0c;但随着 iPhone 进入全面屏时代&#xff0c;它逐渐变得陌生。实际上&#xff0c;Apple 每年都会为其增添功能&#xff0c;方便身体有障人士使用 iPhone。而且&#xff0c;这些功能不仅惠及有障…...

编程新知 2026/5/25 21:07:31

基于STM32与LoRa的低功耗物联网气象站DIY全攻略

1. 项目概述&#xff1a;打造一个低功耗的家庭气象站前阵子想给家里的智能家居系统加点“环境感知”能力&#xff0c;琢磨着搞个能实时监测室外温湿度、风速风向的小玩意儿。市面上成品气象站要么数据出不来&#xff0c;要么功耗感人&#xff0c;不适合长期户外部署。于是&…...

编程新知 2026/5/25 19:55:17

构建智能音乐档案：SoundCloud Downloader 的技术架构与实现哲学

构建智能音乐档案&#xff1a;SoundCloud Downloader 的技术架构与实现哲学 【免费下载链接】scdl Soundcloud Music Downloader 项目地址: https://gitcode.com/gh_mirrors/sc/scdl 在流媒体音乐主导的时代&#xff0c;音乐爱好者面临着一种矛盾&#xff1a;我们享受着…...

编程新知 2026/5/25 18:10:23

3个实用场景教你轻松解锁网易云音乐NCM加密文件：ncmdumpGUI完整指南

3个实用场景教你轻松解锁网易云音乐NCM加密文件&#xff1a;ncmdumpGUI完整指南 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经下载了网易云音乐的…...

编程新知 2026/5/25 17:59:42

昇腾CANN cmake 实战：CANN CMake 构建系统——跨平台编译配置与模块化管理

8 个 CANN 仓库各需独立构建&#xff08;ops-transformer/ops-nn/hccl/ge/…&#xff09;→ 手写 8 套 CMakeLists.txt&#xff08;CANN 路径判断、跨 NPU 型号编译、第三方库兼容&#xff09;。cmake 仓库提供统一的 FindCANN.cmake CANNConfig.cmake 模板——任何仓库只需 f…...

编程新知 2026/5/27 4:39:07

5分钟免费搞定HS2汉化：Honey Select 2完整中文补丁终极教程

5分钟免费搞定HS2汉化&#xff1a;Honey Select 2完整中文补丁终极教程 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 还在为Honey Select 2的日文界面而烦恼吗…...

编程新知 2026/5/25 16:17:31

还在手动触发Lindy子任务？这6个隐藏API+3个低代码集成技巧，今天就能上线全自动流水线

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Lindy多步骤任务自动化的价值与演进路径 Lindy效应指出&#xff0c;一项技术的预期剩余寿命与其当前已存在时间正相关&#xff1b;在自动化领域&#xff0c;Lindy原则催生了对“经久验证、语义稳定、可组合性强…...

编程新知 2026/5/25 15:28:08