html+js+css登录注册界面

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

界面

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/865425.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入Django(四)

Django模板系统 引言 在之前的几天中&#xff0c;我们介绍了Django的基本概念、模型和视图。今天我们将探讨Django的模板系统&#xff0c;它负责将数据和HTML模板结合起来&#xff0c;生成最终用户看到的内容。 Django模板系统概述 Django的模板系统是一个强大的工具&#…

【反者道之动,弱者道之用】统计学中的哲理——回归均值 Regression to the mean

&#x1f4a1;&#x1f4a1;在统计学中&#xff0c;回归均值(Regression toward the Mean/Regression to the Mean) 指的是如果变量在其第一次测量时是极端的&#xff0c;则在第二次测量时会趋向于接近平均值的现象。   在金融学中&#xff0c; 回归均值是指股票价格无论高于…

MySQL期末答辩—仓库管理系统

仓库管理系统&#xff1a;仓库管理系统是一种基于互联网对实际仓库的管理平台&#xff0c;旨在提供一个方便、快捷、安全的存取货物和查询商品信息平台。该系统通过在线用户登录查询&#xff0c;可以线上操作线下具体出/入库操作、查询仓库商品信息、提高仓库运作效率&#xff…

imx6ull/linux应用编程学习(8)PWM应用编程(基于正点)

1.应用层如何操控PWM&#xff1a; 与 LED 设备一样&#xff0c; PWM 同样也是通过 sysfs 方式进行操控&#xff0c;进入到/sys/class/pwm 目录下 这里列举出了 8 个以 pwmchipX&#xff08;X 表示数字 0~7&#xff09;命名的文件夹&#xff0c;这八个文件夹其实就对应了…

为什么有些人思考得多,决策反而不好?避免过度拟合的终极指南:决策高手的秘密:灰度认知,黑白决策

在决策过程中&#xff0c;过度关注细节可能导致决策效果不佳&#xff0c;这被称为“过度拟合”。为了避免这种情况&#xff0c;我们需要进行“灰度认知&#xff0c;黑白决策”&#xff0c;即接受不确定性&#xff0c;关注整体趋势&#xff0c;设定明确目标&#xff0c;简化选择…

统一开放平台实现方案(访微信SDK)

需求分析 在互联中&#xff0c;我们的服务是不对外开放的&#xff0c;但是有先场景下我们可以对外开放&#xff0c;但是必须是系统所允许的用户才可以&#xff0c;这样做一方面保证安全&#xff0c;另一方面可以提升平台的能力&#xff0c;比如调用微信的接口必须要进行微信开…

彻底掌握页面白屏检测

前言 在日常的前端开发中&#xff0c;白屏几乎是每个前端开发者都会遇到的问题。白屏问题严重影响了用户体验。当用户访问一个页面时&#xff0c;如果页面长时间处于白屏状态&#xff0c;用户可能会认为页面出现了问题&#xff0c;从而选择离开。这对于任何一个网站都是不利的…

java中,toString()方法在哪些情况下被调用

在Java中&#xff0c;toString()方法被用来返回对象的字符串表示形式。它通常在以下几种情况下被调用&#xff1a; 显式调用&#xff1a; 当你直接调用对象的toString()方法时&#xff0c;例如&#xff1a; MyClass obj new MyClass(); System.out.println(obj.toString());隐…

Python成为全球热门语言的“秘密”

1994年&#xff0c;美国举办了一次 针对Python的workshop 从全美国选出来的程序员 聚在一起讨论着这个“秘密武器” Python是如何从一个开发者的“副业” 变成现在全球热门语言呢&#xff1f; 今天我们一起探讨一下Python简史 往下翻看&#xff0c;解锁答案&#x1f447…

iOS 视图实现渐变色背景

需求 目的是要实现视图的自定义的渐变背景色&#xff0c;实现一个能够随时使用的工具。 实现讨论 在 iOS 中&#xff0c;如果设置视图单一的背景色&#xff0c;是很简单的。可是&#xff0c;如果要设置渐变的背景色&#xff0c;该怎么实现呢&#xff1f;其实也没有很是麻烦&…

MSI安装包安装的Mysql8,配置文件my.ini在哪儿?

版本 我安装的版本是8.0.36&#xff0c;server根目录下没有配置文件。 文件位置 首先找到对应的windows服务 右击属性&#xff0c;可以看到启动参数&#xff0c;启动参数中有配置文件的路径 比如我的配置文件在"C:\ProgramData\MySQL\MySQL Server 8.0\my.ini"

Pylons 和 Flex 3

“Pylons” 和 “Flex 3” 是两个不同的技术&#xff0c;各自有着不同的背景和应用场景&#xff1a; Pylons Pylons 是一个 Python Web 框架&#xff0c;用于快速开发 Web 应用程序。它强调简单性、灵活性和可扩展性&#xff0c;以便开发人员能够快速构建和部署功能强大的 We…

ai智能语音机器人电销系统:让销售更快速高效

智能机器人电销系统是指采用人工智能和机器人技术来实现的自动电销工具。随着企业竞争加剧&#xff0c;销售团队面临的挑战也越来越大。在人力资源和成本控制方面有很大的限制&#xff0c;而传统的电销方式也已经无法满足市场需求&#xff0c;因此需要一种新的解决方案来提高营…

mysql数据库自动备份

crond cron 实现定时执行 安装 yum install crond启动 service crond start查看状态 service crond status执行 crontab xx.cron查看任务列表 crontab -l删除所有任务 crontab -r 示例&#xff1a;每分钟写入 Good morning 到 mine.cron [rootecs-f1dd-0001 fztmp]# echo ‘* …

【CUDA】 归约 Reduction

Reduction Reduction算法从一组数值中产生单个数值。这个单个数值可以是所有元素中的总和、最大值、最小值等。 图1展示了一个求和Reduction的例子。 图1 线程层次结构 在Reduction算法中&#xff0c;线程的常见组织方式是为每个元素使用一个线程。下面将展示利用许多不同方…

反射快速入门

反射就是通过字节码文件获取类的成员变量、构造方法和成员方法的所有信息。 利用反射&#xff0c;我们可以获取成员变量的修饰符、名字、类型、取值。我们可以获取构造方法的名字、形参&#xff0c;并利用通过反射获取的构造方法创建对象。我们可以获取成员方法的修饰符、名字、…

主食冻干复查|希喂、喜崽、生生不息可以盲选吗?测评结果来揭秘

在挑选主食冻干时&#xff0c;许多宠物主人都会感到头疼。尽管主食冻干相较于普通猫粮具有诸多优势&#xff0c;但其价格也相对高昂。这导致许多宠物主人担心高价购买的主食冻干可能营养价值并不理想。然而&#xff0c;在选择时&#xff0c;我们还需要考虑其他重要因素&#xf…

服务器对SEO优化效果的影响

服务器对SEO优化效果的影响 1、服务器的速度对SEO优化效果的影响 服务器的速度除了影响网站的用户体验和转化率外&#xff0c;还影响搜索引擎蜘蛛对网站的访问、抓取&#xff0c;从而严重影响网站的收录。对于搜索引擎来说&#xff0c;会根据网站的权重高低分配相应的抓取时间…

2024.06.26 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 航空工业通飞2024/2025届硕博校园招聘正式开启 校招 | 航空工业通飞2024/2025届硕博校园招聘正式开启 2、校招 | 中国兵器工业第二O六所2025届校园招聘 校招 | 中国兵器工业第…

Zabbix 配置PING监控

Zabbix PING监控介绍 如果需要判断机房的网络或者主机是否正常&#xff0c;这就需要使用zabbix ping&#xff0c;Zabbix使用外部命令fping处理ICMP ping的请求&#xff0c;在基于ubuntu APT方式安装zabbix后默认已存在fping程序。另外zabinx_server配置文件参数FpingLocation默…