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

html+js+css登录注册界面

news 2026/2/9 0:52:17

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

界面

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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2026/2/8 4:37:10

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/2/8 20:43:02

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/2/5 4:39:03

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2026/2/1 4:17:33

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

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

编程新知 2025/12/23 11:20:24

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2026/1/30 2:34:31

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2026/2/5 5:03:25

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...

编程新知 2025/10/9 0:45:56