注册页面js+css+html(2)

最新推荐文章于 2024-08-23 09:47:36 发布
最新推荐文章于 2024-08-23 09:47:36 发布
阅读量59 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73480865/article/details/132517348
版权

效果图：在这里插入图片描述

给老子抄！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
    body {
      background-color: #f0f2f5;
      font-family: Arial, sans-serif;
    }
    form {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin: 50px auto;
      max-width: 500px;
      padding: 30px;
    }
    h1 {
      color: #1877f2;
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 20px;
      text-align: center;
    }
    input[type="text"], input[type="email"], input[type="password"] {
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 16px;
      margin-bottom: 20px;
      padding: 10px;
      width: 100%;
    }
    input[type="submit"] {
      background-color: #1877f2;
      border: none;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      margin-top: 20px;
      padding: 10px;
      width: 100%;
    }
    input[type="submit"]:hover {
      background-color: #166fe5;
    }
    p {
      color: #999;
      font-size: 14px;
      margin-top: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
<h2>注册页面</h2>
<form role="form" action="/login" method="post">
  请输入用户名:<input type="text" name="name" id="name"><br>
    仅限qq邮箱：<input type="text" placeholder="请输入你的邮箱地址" size="17" id="email" onblur="judgeemail()"><br>
    验证码：<input type="text" id="verify" onblur="judgeverify" ><button id="myButton" onclick="disableButton(this)">发验证码</button>
    <span id="countdown"></span><br>
  请输入密码：<input type="password" name="password" id="password"><br>
  确认密码：<input type="password" title="确认密码" size="12" id="againpass" onblur="judgeagain()"><br>
  <input type="submit" name="sign" value="提交">
</form>


<script languuage="Javascript">
<!--判断用户名-->
function judgename(){
            var name=document.getElementById("name");
            var nameerror=document.getElementById("nameerror");

                var pattern=/^[A-Za-z0-9]{6,10}$/;
                if(!pattern.test(name.value)){
                    nameerror.innerHTML="用户格式不正确！";

                }else{
                    nameerror.innerHTML="";
                    usernameok=true;
                }
            }
<!--判断密码-->
  function judgeagain(){
            var againpass=document.getElementById("againpass");
            var againerror=document.getElementById("againerror");
            var psd=document.getElementById("psd");
                //var pattern=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&]).{6,10}$/;
                if(psd.value!=againpass.value){
                   againerror.innerHTML="两次密码不一致！";

                }else{
                    againerror.innerHTML="";

                   againok=true;
                }
            }
<!--  判断邮箱-->
 function judgeemail(){
            var email=document.getElementById("email");
            var emailerror=document.getElementById("emailerror");
                var pattern=/^(?=.*[@]).+$/;
                if(!pattern.test(email.value)){
                   emailerror.innerHTML="邮箱格式不正确！";

                }else{
                    emailerror.innerHTML="";

                 emailok=true;
                }
            }
<!--判断验证码-->
function judgeverify(){

}
<!--1分钟后关闭按钮-->
function disableButton(button) {
 button.disabled = true; // 禁用按钮
  var countdownElement = document.getElementById("countdown");
  var countdown = 60; // 设置倒计时时间为60秒

  // 更新倒计时显示，并每秒更新一次
  countdownElement.innerText = countdown;
  var countdownInterval = setInterval(function() {
    countdown--;
    countdownElement.innerText = countdown;

    // 当倒计时结束时，启用按钮并清除倒计时定时器
    if (countdown <= 0) {
      button.disabled = false;
      clearInterval(countdownInterval);
      countdownElement.innerText = "";
    }
  }, 1000);
}
</script>
</body>
</html>
耕的码田
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS+JavaScript实现登录注册源码
05-31
总的来说，这个压缩包提供了HTML、CSS和JavaScript结合的实例，帮助开发者了解如何创建具有完整功能的登录注册页面。通过学习和分析这些源码，你可以掌握前端开发的基本技巧，包括页面布局、样式设计以及用户交互的...
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
html+css+js简单的登录页面
04-10
html+css+js简单的登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更...
注册页面weui+html+css+js
03-21
注册页面weui+html+css+js
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
【前端入门】HTML5全攻略
isun1的博客
08-23 1016
HTML指的是超文本标记语言，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是由国际最著名的标准化组织。Web标准的构成（重点）主要包括结构（structure）、表现（presebtation）、行为（Behavior）三个方面。结构用于对网页元素进行整理与分类，现阶段主要学的是HTML。表现用于设置网页元素的版式、颜色、大小等外观样式的设计，主要指CSS。
基于微信小程序网上商城设计设计与实现.docx
08-23
基于微信小程序网上商城设计设计与实现.docx
各种业务架构图.pdf
08-23
各种业务架构图.pdf
基于ssm和vue的 校园疫情防控系统源码 （优秀毕业设计源码）
08-23
1. 校园疫情防控系统代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是ssm，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
某自动化立体仓库规划设计方案.pdf
08-23
某自动化立体仓库规划设计方案.pdf
weixin174基于微信小程序的教学质量评价系统ssm.zip
08-23
本基于微信小程序的教学质量评价系统有管理员，教师，学生三个角色。管理员功能有个人中心，学生管理，教师管理，课程类别管理，课程信息管理，教学评价管理，系统管理。微信小程序部分教师和学生都可以注册登录，教师可以查看课程信息并且可以查看学生的评价，学生可以查看课程信息，教师信息，并且可以对教师的教学质量进行评价操作，还可以查看校园资讯。。因而具有一定的实用性。 本站后台采用Java的SSM框架进行后台管理开发，可以在浏览器上登录进行后台数据方面的管理，MySQL作为本地数据库，微信小程序用到了微信开发者工具，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得基于微信小程序的教学质量评价系统管理工作系统化、规范化
医疗健康年终总结PPT模板.pptx
08-23
年终总结 新年计划 述职报告 工作汇报 医疗报告 员工转正 季度报告 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
weixin197基于JAVA的微信食堂线上订餐小程序的设计与实现ssm.zip
08-23
微信食堂线上订餐小程序可以实现商品管理，商品评价管理，商家管理，公告管理，商品订单管理，在线充值等功能。该系统采用了SSM框架，Mysql数据库，Java语言等技术实现管理员后台，采用微信开发者工具来对用户小程序端进行了开发。 微信食堂线上订餐小程序让商品订单，商家信息，商品信息等相关信息集中在后台让管理员管理，让用户在小程序端订餐，管理个人订单，该系统让信息管理变得高效，也让用户订餐，查看个人订单等信息变得越来越方便。
【kafka消息助手】可以连接kafka，并且发送消息到kafka中
最新发布
08-23
【Kafka消息助手】是一款高效、稳定的 Kafka 客户端工具，旨在帮助用户轻松连接 Kafka 集群，实现消息的快速发送与接收。这款助手以其强大的功能和便捷的操作，成为开发者们在处理 Kafka 消息传递过程中的得力助手。 【Kafka消息助手】的核心功能之一便是连接 Kafka 集群。用户只需简单配置 Kafka 集群的地址、端口以及相关认证信息，即可建立起与 Kafka 的稳定连接。助手支持多种连接方式，包括直连、SSL 加密连接等，满足不同场景下的安全需求。 连接成功后，【Kafka消息助手】便可以发送消息到 Kafka 中。用户可以通过助手自带的发送界面，轻松构建消息内容，并指定发送至哪个主题（Topic）和分区（Partition）。助手支持多种消息格式，如文本、JSON、XML 等，方便用户根据实际需求选择。在发送消息时，用户还可以自定义消息的键（Key）和头信息（Headers），以满足更复杂的业务场景。
跨越边界：软件与操作系统兼容性的终极解决策略
08-23
编程故障处理，也常被称为调试（Debugging），是软件开发过程中识别、分析和修复程序中错误或故障的过程。它是确保软件质量和可靠性的关键环节。以下是编程故障处理的详细解释： ###故障发生的原因 - **语法错误**：编程语言的规则没有正确遵守。 - **逻辑错误**：程序实现了错误的逻辑或算法。 - **运行时错误**：程序在运行时遇到了未预见的情况，如除以零、数组越界等。 - **资源问题**：内存不足、磁盘空间不足等。 - **外部依赖故障**：依赖的外部系统或服务不可用。 ### 故障处理的步骤 - **识别问题**：通过用户反馈、测试结果或监控报警发现问题。 - **复现问题**：在可控环境中稳定复现问题，为进一步分析做准备。 - **信息收集**：收集相关的日志、错误信息、堆栈跟踪等数据。 - **分析问题**：根据收集到的信息，分析问题的可能原因。 - **定位问题**：确定问题发生的具体位置，如代码行、模块或系统组件。 - **制定修复方案**：根据问题原因，设计解决方案或修复措施。 - **实施修复**：在开发环境中实施修复，并进行单元测试。 - **测试验证
weixin170健身达人微信小程序的设计与实现ssm.zip
08-23
如今的信息时代，对信息的共享性，信息的流通性有着较高要求，因此传统管理方式就不适合。为了让管理模式进行升级，也为了更好的维护信息，健身达人微信小程序的开发运用就显得很有必要。并且通过开发健身达人微信小程序，不仅可以让所学的微信小程序技术得到实际运用，也可以掌握MySQL的使用方法，对自身编程能力也有一个检验和提升的过程。尤其是通过实践，可以对系统的开发流程加深印象，无论是前期的分析与设计，还是后期的编码测试等环节，都可以有一个深刻的了解。 借助于健身达人微信小程序这样的工具，让信息系统化，流程化，规范化是最终的发展结果，让其遵循实际操作流程的情况下，对信息实施规范化处理，让信息通过电子的方式进行保存，无论是管理人员检索信息，可以便利化操作，真正缩短信息处理时间，节省人力和信息管理的成本。
ChromeiumFXDemo-master【vue2+winform】
08-23
谷歌浏览器中实现c#和winform通讯
weixin217基于微信小程序的学生签到系统设计与实现ssm.zip
08-23
社会发展日新月异，用计算机应用实现数据管理功能已经算是很完善的了，但是随着移动互联网的到来，处理信息不再受制于地理位置的限制，处理信息及时高效，备受人们的喜爱。所以各大互联网厂商都瞄准移动互联网这个潮流进行各大布局，经过多年的大浪淘沙，各种移动操作系统的不断面世，而目前市场占有率最高的就是微信小程序，本次开发一套基于微信小程序的生签到系统，有管理员，教师，学生三个角色。管理员功能有个人中心，学生管理，教师管理，签到管理，学生签到管理，班课信息管理，加入班课管理，请假信息管理，审批信息管理，销假信息管理，系统管理。教师和学生都可以在微信端注册和登录，教师可以管理签到信息，管理班课信息，审批请假信息，查看学生签到，查看加入班级，查看审批信息和销假信息。学生可以查看教师发布的学生签到信息，可以自己选择加入班课信息，添加请假信息，查看审批信息，进行销假操作。基于微信小程序的生签到系统服务端用Java开发的网站后台，接收并且处理微信小程序端传入的json数据，数据库用到了MySQL数据库作为数据的存储。这样就让用户用着方便快捷，都通过同一个后台进行业务处理，而后台又可以根据并发量做好部署，用硬件和软件进行协作，满足于数据的交互式处理，让用户的数据存储更安全，得到数据更方便。
基于ssm和vue的 电动车智能充电服务平台源码 电动车智能充电服务平台代码（高分毕设项目源码）
08-23
1. 电动车智能充电服务平台代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是ssm，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
简易的注册页面html+css+js
05-28
好的，以下是一个简易的注册页面的HTML、CSS和JS代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>注册</h1> <form id="register-form"> <label for="username">用户名</label> <input type="text" id="username" name="username"> <label for="email">邮箱</label> <input type="email" id="email" name="email"> <label for="password">密码</label> <input type="password" id="password" name="password"> <button type="submit">注册</button> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ```css .container { max-width: 400px; margin: 0 auto; text-align: center; } h1 { font-size: 32px; margin-bottom: 20px; } form { display: inline-block; text-align: left; } label { display: block; margin-bottom: 10px; } input { padding: 8px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; width: 100%; } button { padding: 10px; background-color: #0077cc; color: #fff; border: none; border-radius: 4px; cursor: pointer; } ``` JS代码： ```js const form = document.getElementById('register-form'); const username = document.getElementById('username'); const email = document.getElementById('email'); const password = document.getElementById('password'); form.addEventListener('submit', (e) => { e.preventDefault(); const userData = { username: username.value, email: email.value, password: password.value }; // TODO: 将用户数据提交到服务器 console.log(userData); }); ``` 这段代码实现了一个简易的注册页面，包括用户名、邮箱和密码的输入框以及一个注册按钮。当用户点击注册按钮时，JS代码会获取输入框中的数据，并将其打印到控制台上。你可以根据需要修改代码，例如将数据提交到服务器进行注册。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值