web前端注册界面

已于 2024-05-21 15:55:21 修改
阅读量3.6k 收藏 37
点赞数 8
文章标签： html css javascript
于 2022-12-28 20:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62880319/article/details/128468340
版权

       此注册页面，需要用户输入11位手机号和正确验证码。随机获取验证码，并对手机号长度和验证码进行校验，校验正确方可显示注册成功。同时，60秒内不能重复获取验证码。

演示

HTML源代码 

  <!DOCTYPE html>

  <html lang="en">

  <head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <link rel="stylesheet" href="./css/common.css">//连接

  <style>

    body {

      background: url(./img/login_bgc.jpg) no-repeat top center;

    }

    .login-logo {

      width: 93px;

      height: 92px;

      margin: 20px auto;

    }

    .wrap {

      margin: 0 auto;

      width: 380px;

      background-color: #fff;

      padding: 38px 0 22px;

      font-size: 12px;

      color: #999;

      border-radius: 5px;

    }

    .wrap input {

      box-sizing: border-box;

      display: block;

      width: 300px;

      height: 40px;

      margin-bottom: 18px;

      padding-left: 17px;

      border: 1px solid #cecece;

      border-radius: 5px;

    }

    input::-webkit-input-placeholder {

      /* WebKit browsers */

      color: #cecece;

    }

    .box {

      margin: 0 39px;

    }

    .box p {

      text-align: right;

      margin: 14px 0;

      color: #cecece;

    }

    .box p>a {

      color: #999;

    }

    .box button {

      box-sizing: border-box;

      display: block;

      width: 300px;

      height: 40px;

      margin-bottom: 18px;

      padding-left: 17px;

      border: 1px solid #cecece;

      border-radius: 5px;}

    .login-type {

      border-top: 1px solid #999;

      padding: 15px 38px 0;

    }

    .login-type ul {

      margin-top: 20px;

    }

    .login-type ul li {

      float: left;

      margin-right: 50px;

      text-align: center;

    }

    .registe {

      text-align: center;

      margin-top: 16px;

    }

    .reg {

      padding: 6px 22px;

      font-size: 12px;

      color: #fff;

      background-color: rgba(0, 0, 0, .2);

      border-radius: 5px;

    }

  </style>

</head>

<body>

  <div class="login-logo"><img src="./img/login_logo.png" alt=""></div>

  <div class="wrap">

    <div class="box">

      <form action="">

      <input type="text" placeholder="请输入您的手机号"  id="account"/>

      <button type="button" id="add" onclick="Random()">获取验证码</button>

      <input type="text"  placeholder="请输入验证码" id="num" /> 

      <input type="submit" value="立即注册" onclick="getInformation()"/>

    <script>

         function getInformation(){

            var account=document.getElementById("account").value;

            var num=document.getElementById("num").value;

            if(account==null||account==""){

            alert("手机号不能为空");

            return false;}

            if(account.length!=11){

            alert("请输入11位正确手机号");

            return false;}

            if(num==null){

            alert("验证码不能为空");

            return false;}

            if(num!=random){

            alert("验证码错误，请重新输入");

            return false;}

            else{

                alert("注册成功!");

            }

          }

      var add=document.getElementById("add")

      console.log(add)

      var random=""

      function Random(){

        random=""

        for(var i=0; i<4;i++){

          random+=Math.floor(Math.random()*10)

        }

         alert("验证码"+random)}

        // 按钮点击之后，会禁用 disabled 为true 

        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改

        // 里面秒数是有变化的，因此需要用到定时器

        // 定义一个变量，在定时器里面，不断递减

        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态

        var btn = document.querySelector('button');

        var time = 60; // 定义剩下的秒数

        btn.addEventListener('click', function () {

            btn.disabled = true;

            var timer = setInterval(function () {

                if (time == 0) {

                    // 清除定时器和复原按钮

                    clearInterval(timer);

                    btn.disabled = false;

                    btn.innerHTML = '获取验证码';

                    time = 60;

                } else {

                    btn.innerHTML = time + '秒后重新获取';

                    time--;

                }

            }, 1000)

        })

    </script>

        </form>

      <p>注册视为同意<a href="#">《悠游用户使用协议》</a></p>

    </div>

    <div class="login-type">

      <p>用合作网站账户直接登录</p>

      <ul class="clearfix">

        <li>

          <a href><img src="./img/weibo.png" alt=""></a>

          <p>新浪微博</p>

        </li>

        <li>

         <a href><img src="./img/QQ.png" alt=""></a> 

          <p>QQ</p>

        </li>

        <li>

          <a href><img src="./img/weixin.png" alt=""></a> 

          <p>微信</p>

        </li>

      </ul>

    </div>

  </div>

  <div class="registe">

    <span class="reg">已有帐号?<a href="login.html" style="color: #5696ff;">马上登录?</a></span>

  </div>

</body>

</html>

 外部样式表(外链式）common.css

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
body {
    background-color: #f3f3f3;
}
.fl {
    float: left;
}
 
.fr {
    float: right;
}
 
.nav {
    margin: 0 auto;
    width: 1200px;
    font-size: 18px;
}
 
.logo {
    margin-right: 159px;
    line-height: 72px;
}
 
.logo img {
    vertical-align: middle;
}
 
.list>li {
    float: left;
    width: 80px;
    height: 72px;
    margin-right: 24px;
    line-height: 72px;
    text-align: center;
}
 
.current {
    background-color: #5696ff;
    color: white;
}
 
.login-reg>li {
    float: left;
    line-height: 72px;
}
 
.login-middle {
    color: #999;
}
 
 
.footer {
    color: #fff;
    height: 130px;
    background-color: #6297f7;
    overflow: hidden;
}
.footer div{
    width: 660px;
    margin: 34px auto;
    text-align: left;
    line-height: 34px;
}
.end {
    margin-bottom: 66px;
}
 
 
.wrap {
    width: 1200px;
    margin: 0 auto;
}
img {
    vertical-align: middle;
}
a {
    color: #6297f7;;
}
 
.search-row {
    background-color: #666666;
    line-height: 57px;
}
 
.search-row img {
    vertical-align: middle;
    margin: 0 40px;
}
 
.search-row span {
    border-left: 1px solid #fff;
}
 
.search-row ul li {
    float: left;
}

Bla ？k
关注
  • 8
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css+php+mysql实现注册+登录+修改密码（附完整代码）
m0_67402125的博客
07-31 1万+
目的在利用QT软件进行登录软件开发时，就想要实现点击按钮跳转到指定网页进行注册以及修改密码等操作，就像QQ客户端那样可以实现网页端修改密码，申请账户等操作；（因需要开启花生壳内网穿透，如需体验可私聊！）目前已经实现的操作html界面；html跳转php；php连接数据库；php实现对数据库的增删改查。...
web前端开发 注册界面 后台管理界面
01-06
在Web前端开发中，"注册界面"和"后台管理界面"是两个重要的组成部分，它们构成了一个完整Web应用的核心用户体验和内部管理系统。以下是关于这两个主题的详细知识点： **一、Web前端开发** Web前端开发主要涉及网页...
Web前端用户注册
09-11
登录，注册是我们使用的较多的表单认证，每个项目都从头开始写，显然是没有必要的。下面和大家分享下我所写的表单验证： 下面的代码，会附上完整代码，使用的过程中，只需要根据自己的项目进行简单的修改即可，非常方便。
【HTML+CSS+JS】登录注册页面大合集
lion_no_back的博客
04-25 2万+
登录注册页面改造升级
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整注册/登录表单（超实用）轻松搞定注册/登录表单功能：完整源代码与详细教程（新手必看）轻松入门前端开发新手超友好
最新发布
南北极之间
06-16 792
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
页页码的前端显示的实现
mr_zheng0_0的博客
04-11 1553
页页码的前端显示的实现原创 2016年08月16日 22:39:55标签：javascript /前端 /分页1739分页页码的前端显示实现效果说明准备做分页的时候滚回去找了一下之前写过的demo结果被自己写的丑哭了（大概长这样）：  主要是不符合现在一般网站的跳转习惯，自己用着都觉得不方便，所以重新写了一下新的分页的前端（顿时觉得舒服了许多）： js思路首先要明确，只需要知道当前页是第几页以及总...
前端小案例——登录界面（正则验证, 附源码）
前端小白一枚
03-04 2044
这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。来监听 DOMContentLoaded 事件，确保页面中的所有元素都已加载完毕。最后，根据验证结果，在页面上显示相应的提示信息。在表单提交事件中，首先阻止默认的表单提交行为。，以便在验证用户输入后自行处理提交逻辑。和用于显示验证信息的元素。当页面加载完成后，通过。用于验证身份证号码。
Java-Web前后端交互实现登陆注册（附源码）
比时代快才是快，趁风使柁
03-16 1万+
此登陆注册界面使用Maven，Servlet，Mybatis，Mysql，Tomcat技术以及结合了html，css界面设置实现了前后端交互，将前端界面输入的数据传入到后端java中进行处理并将数据保存在mysql数据库之中，是个很不错的练手小项目，新入门小伙伴可以一起尝试。
Web前端登录界面
m0_51564474的博客
04-30 8436
HTML+CSS实现的一个登录界面 web前端课程学完之后做的一个东西，记录一下自己的学习过程 最终的效果图 1.HTML部分 <body> <div class="main"> <h1>Login</h1> <div class="loin"> <div class="first"> <span class="fa fa-githu
Vue+SpringBoot项目开发：登录页面美化，登录功能实现（三）
u010679782的博客
08-11 2462
上一章写了这一章的内容是引入element-plus和axios实现页面的布局和前后端数据的串联，实现一个登陆的功能，跳转到首页现在前端项目的一个结构目录。
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
热门推荐
道阻且长，行则将至。
04-20 26万+
推荐十款好看的登录注册界面，赶紧收藏起来吧！ 界面一：简约版 界面二 界面三 界面四 界面五 界面六 界面七 界面八 界面九 界面十
前端代码+登陆与注册
08-28
前端登陆与注册界面 主要包括账号登陆、扫码登陆、短信验证等功能
基于jquery的web端登录界面前端
02-20
用jquery手写的web登录界面前端代码，欢迎讨论相互学习。
登陆注册源码
07-27
登陆注册模块的源码+sql，有数据验证和美观的页面。基于SSH框架实现的。
纯CSS3用户登录界面设计
04-24
纯CSS3用户登录界面设计
WEB基本网页代码（含登录、注册、信息维护等）
06-10
自己做的最简单的网页，有登录、注册、信息维护、密码找回、查看个人信息等功能，含加密与解密。数据库的创建为 Create table userinfo( Username varchar primary key, Pwd varchar, Gender varchar, Email varchar, Question varchar, Answer varchar)
Web前端网页期末大作业
01-10
主页设计布局是在网站的左上... 首先选定 本网页制作工具是前端开发利器： WebStorm，创建前端项目工程，并创建相应的文件夹，存放各个css、js，还有网页中用到的各种图片放到pic文件夹中，背景音乐放到music文件夹中。
Web前端大作业.zip
05-22
JavaScript是Web前端的核心技术之一，通过它，我们可以实现表单验证、页面动画、异步数据请求等功能。 6. **Shopping**：可能是购物车相关的功能模块，可能包含购物车逻辑、结算流程等。 7. **register**：用户...
WEB前端毕业实习报告.doc
06-25
【标题】：WEB前端毕业实习报告 【描述】：这份报告详细记录了一位学生在WEB前端领域的毕业实习经历，包括实习目的、实习公司介绍、实习过程以及实习中的学习与体会。 【标签】：HTML5, CSS盒子模型, 块元素, 行内...
web前端注册页面代码
12-28
以下是一个简单的Web前端注册页面的代码示例： ```html <!DOCTYPE html> <html> <head> <title>注册页面</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } .container { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; margin-bottom: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-weight: bold; margin-bottom: 5px; } .form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 3px; } .form-group button { width: 100%; padding: 10px; background-color: #4CAF50; color: #fff; border: none; border-radius: 3px; cursor: pointer; } </style> </head> <body> <div class="container"> <h2>注册</h2> <form> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" id="password" name="password" required> </div> <div class="form-group"> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password" name="confirm-password" required> </div> <div class="form-group"> <button type="submit">注册</button> </div> </form> </div> </body> </html> ``` 这段代码实现了一个简单的注册页面，包含用户名、密码和确认密码的输入框，以及一个注册按钮。用户需要填写所有必填字段才能提交注册表单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值