实现综合案例的注册（register）、登录（login）和跳转到主页面（index）的功能

已于 2022-06-08 20:46:49 修改
阅读量1.3k 收藏 4
点赞数
文章标签： javascript html
于 2022-06-08 20:38:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69105510/article/details/125191959
版权
这是一个关于网页注册、登录和跳转到主页面的示例。页面包括头部导航、搜索框、注册表单等元素。用户需要输入用户名、手机号、验证码、密码和确认密码。注册时，各个字段会进行正则验证，如手机号、用户名等。完成验证后，用户可以点击‘下一步’按钮进行下一步操作。页面还包含了同意服务协议的选项和验证码倒计时功能。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>小兔鲜案例</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <!-- <link rel="shortcut icon" href="./favicon.ico"> -->
    <link rel="stylesheet" href="./课堂-综合案例/css/common.css">
    <link rel="stylesheet" href="./课堂-综合案例/css/register.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>
 
<body>
    <!-- 项部导航 -->
    <div class="xtx_topnav">
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <a href=" ">请先登录</a >
                </li>
                <li>
                    <a href="./register.html">免费注册</a >
                </li>
                <li>
                    <a href="./center-order.html">我的订单</a >
                </li>
                <li>
                    <a href="./center.html">会员中心</a >
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a >
                </li>
                <li>
                    <a href="javascript:;">在线客服</a >
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="mobile sprites"></i> 手机版
                    </a >
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="/">小兔鲜儿</a ></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li>
                        <a href="./index.html">首页</a >
                    </li>
                    <li>
                        <a href="./category01.html">生鲜</a >
                    </li>
                    <li>
                        <a href="./category01.html">美食</a >
                    </li>
                    <li>
                        <a href="./category01.html">餐厨</a >
                    </li>
                    <li>
                        <a href="./category01.html">电器</a >
                    </li>
                    <li>
                        <a href="./category01.html">居家</a >
                    </li>
                    <li&

最低0.47元/天 解锁文章
qq_69105510
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
综合案例，index，register，login
qq_41619968的博客
05-28 544
index let li=document.querySelector('.xtx_navs li:first-child'); let obj=JSON.parse(localStorage.getItem('data')); if(obj){ li.innerHTML=`<a href="#">您好${obj.username}用户!</a>`; } register let icon=document.querySelector('.icon-queren'.
css+js新用户注册界面实现
qq_36507046的博客
07-25 546
css+js新用户注册界面实现
VB注册码代码示例.（有源码+实例）
12-30
VB注册码代码示例. 可以学习、参考，适合新入门的各位兄弟
html5 案例练习（注册页面）
baipenggui_bo
08-16 442
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世纪佳缘</title> </head> <body> <table width="600" align="center" > <caption><h4>青春不常在，抓紧谈恋爱</h...
html/php 注册成功后跳转
yi_ZhangMengXin的博客
12-22 1669
由html代码编写的注册页面
vue-例3-15综合示例演示注册.html
虾米大王的学习历程
04-24 142
【代码】vue-例3-15综合示例演示注册.html。
login-and-register.rar_login_注册页面_登录注册_网站特效
09-14
"login-and-register.rar" 是一个包含登录和注册页面特效资源的压缩包，它主要用于模拟前程无忧这种大型招聘网站的用户体验。这个压缩包的焦点在于"登录注册_网站特效"，意味着其中可能包含了JavaScript、CSS3以及...
login-register-template:使用此模板创建登录和注册页面！
05-07
使用此模板创建登录和注册页面！ 使用此模板的步骤： 单击此页面的Use this template按钮。 输入存储库名称（由您决定！） 单击Create repository from template 等待生成，直到完成 根据您的要求编辑index.html...
register-login-api:注册和登录功能的相关中间件使用
05-16
考虑到在实际项目中，注册和登录功能是比较常见的，所以就学了一些登录验证之类的库。用node.js + express 写写代码练练手，大家也可以学习学习，说不定工作中能用上。 项目用到的第三方库 jsonwebtoken 生成token...
html_login_register:登录和注册页面的实现HTML，CSS，JS
05-06
参考学习使用 效果预览 如果你对后端有兴趣，可以参考 我的这篇文章 在Linux下搭建Boa这个web server，当然也可以使用apache等支持cgi的web server。 如需编译后端程序，在cgi-bin目录下执行 make命令即可。...
JSP实现用户登录、注册和退出功能
10-22
在本文中，我们将探讨如何使用Java Server Pages（JSP）技术实现用户登录、注册和退出功能。这些功能是任何Web应用程序的基础部分，尤其对于需要用户身份验证的系统而言至关重要。我们将按照以下步骤进行介绍： 1. ...
web前端学习55-58（综合案例-注册页面）
weixin_51249285的博客
11-09 756
综合案例-注册页面（1） 基本框架，后续需调整格式等细节 eg: 综合案例-注册页面1.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-w
html-综合案例之注册页面
m0_53163148的博客
09-17 787
2.< lable >中添加for属性，< input >中添加id属性，将两个标签形成联系。页面布局分为上下两大部分，上面用标题标签，下面用表格标签，行标签和单元格标签。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.设置默认选中选项，在< input >标签中设置属性。右边为文本框(value设置默认值)右边是表单元素中的单选按钮。（以此类推）总共十一行。
html注册提交后自动跳转,点击登录，登陆成功，自动跳转到起始页面，这要怎么做？...
weixin_39600366的博客
05-31 5932
先介绍下登录过程，然后介绍代码如何做。登录过程下面这个页面是起始页面，因为我已经测试过了，所以这里会显示我的用户名点击按钮跳转到登录页面，输入用户名，密码，然后点击登录(注意这里我们的用户名是:segment)页面会跳转到起始页面，并且会显示我们刚才的用户名起始页面设计--goTo-demo.html主要代码如下：登录返回后下面显示你的登录用户名点击跳转登录当前用户名是：var username ...
前端笔记08 - 综合案例-注册页面
kukudeqi的博客
09-17 91
<!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>综合
14-综合案例-注册页面
WangZhang_521的博客
12-22 107
14-综合案例-注册页面 <!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"> &l
登录注册页面跳转
热门推荐
qq_37807821的博客
09-02 5万+
用HTML、jQuery和css写一个简单的登录注册页面 看了一些前端部分的视频，有点手痒，想起大学时做的某管理系统的前端部分，当时基本都是靠着CV写的，现在想想应该可以自己写一点了。 话不多说，先上图： 首先是登录页面： 点击注册按钮可以跳转到注册页面： 注册页面做了一点简单的判断： 伪非空验证： 还有伪密码验证： 红字提示存在两秒，两秒后消失，清除密码框内的内容，但是不清除用户名框内的文本。 然后当用户名和密码输入正确以后（其实两次密码一样就行，用户名不空就好）就可以跳转到登录页面。这里有一个坑
html注册成功跳转到登录界面,flask注册成功后如何直接跳转到认证页面？
weixin_39781594的博客
06-05 2019
现在注册玩之后跳转到登录界面，然后登录后在进行认证，这一步我感觉多余，注册成功后怎么直接跳转到认证页面，并且是当前注册用户登录？相当于注册成功后省略登录认证这一步。登录:@auth.route('/login',methods=['GET','POST'])def login():username = request.form.get('username')password = request.f...
注册页面及页面跳转
最新发布
qq_51554230的博客
03-25 763
注册页面的设计及登录页面与注册页面之间的跳转
qt实现登录页面跳转到注册页面
05-20
要实现登录页面跳转到注册页面，可以使用Qt中的QStackedWidget控件来实现。QStackedWidget是一种堆栈式窗口控件，可以在其中放置多个子窗口，并且只显示其中一个子窗口。实现登录页面跳转到注册页面的步骤如下： 1. 在Qt设计师中创建一个QStackedWidget控件，并在其中加入两个QWidget控件，一个是登录页面，一个是注册页面。 2. 在登录页面中添加一个QPushButton控件，用于跳转到注册页面。 3. 在QPushButton的clicked()信号槽函数中，调用QStackedWidget的setCurrentIndex()方法，将当前显示的QWidget控件切换为注册页面。 示例代码如下： ```cpp #include <QStackedWidget> #include <QPushButton> // 创建QStackedWidget控件 QStackedWidget *stackedWidget = new QStackedWidget(this); // 创建登录页面和注册页面 QWidget *loginPage = new QWidget(); QWidget *registerPage = new QWidget(); // 将登录页面和注册页面添加到QStackedWidget中 stackedWidget->addWidget(loginPage); stackedWidget->addWidget(registerPage); // 在登录页面中添加一个QPushButton控件 QPushButton *registerButton = new QPushButton("注册", loginPage); // 在QPushButton的clicked()信号槽函数中跳转到注册页面 connect(registerButton, &QPushButton::clicked, stackedWidget, [=](){ stackedWidget->setCurrentIndex(1); }); ``` 这样就实现了在登录页面中点击按钮跳转到注册页面的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值