简单实现注册登录

最新推荐文章于 2024-05-06 14:03:35 发布
最新推荐文章于 2024-05-06 14:03:35 发布
阅读量1.2k 收藏 5
点赞数 2
分类专栏： 应用案例 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Steve_Richard/article/details/100715062
版权

简单实现注册登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/others.css">
    <script src="../js/lhh.js"></script>
</head>
<body>
    <div class="zhuce">
    <h1>
        <img src="../images/注册_03.gif" alt="">
    </h1>
    </div>
    <div class="zhucebox">
    <div class="signup">
        <img src="../images/duang.jpg" alt="">
        <form action="logoin.html">
            <h2></h2>
            <p>     </p>
            <div class="inp1">
                <i></i><input type="text" name="tel" placeholder="输入手机号" class="tel">
            </div>
            <div class="inp2">
                <i></i><input type="text" name="pass" placeholder="输入密码" class="pass"><i class="dis"></i>
            </div>
            <div class="inp3">
                <i></i><input type="text" name="" placeholder="输入右侧验证码" class="ma"><span class="sjs"></span><a href="javascript:;" class="huan"></a>
            </div>
            <div class="inp4">
                <i></i><input type="text" name="" placeholder="输入短信验证码" class="duan"><input type="button" href="javascript:;" class="duanxin" value="免费获取短信">
            </div>
            <div class="detail">
                <i></i><p>我同意<a href="#">《暴风影音注册协议》</a></p><a href="../html/logoin.html" class="deng">立即登录></a>
            </div>
            <button class="btn">注册</button>
            <div class="que">
                <i></i><a href="#" class="qua">遇到问题</a>
            </div>
            <h5><em>——————</em>其他方式登录<em>——————</em></h5>
            <div class="san">
                <a href="#" class="qq"></a><a href="#" class="bo"></a><a href="#" class="xin"></a>
            </div>
        </form>
    </div>
    </div>

    <script>
        var form = document.querySelector('form')
        var inp = document.querySelectorAll('input')
        var op = document.querySelector('p')
        var flag = true

        //验证手机号
        inp[0].oninput = function(){
            var reg1 = /^1[3,4,5,6,7,8,9][0-9]{9}$/g
            if(!reg1.test(inp[0].value)){
                op.style.display = 'block'
                op.innerHTML = '手机号格式不对'
                return flag = false
            }else{
                op.innerHTML = ''
            }
        }
        inp[0].onblur = function(){
            var reg1 = /^1[3,4,5,6,7,8,9][0-9]{9}$/g
            if(!reg1.test(inp[0].value)){
                op.style.display = 'block'
                op.innerHTML = '手机号格式不对'
                return flag = false
            }else{
                op.innerHTML = ''
            }
        }

        //验证密码
        var dis = form.querySelector('.dis')
        inp[1].oninput = function(){//请输入6-32位英文、数字和符号的组合密码
            var regNum = /^\d+$/;  //纯数字
            var regLetter = /^[a-zA-Z]+$/  //纯字母
            var regSpe = /^[!@#%^&_]+$/;  //特殊字符
            //包含字母、数字、特殊字符
            var _regNum = /\d+/;  
            var _regLetter = /[a-zA-Z]+/
            var _regSpe = /[!@#%^&_]+/; 
            var psw = inp[1].value
            if(inp[1].value.length<6){
                console.log(inp[1].value.length)
                op.innerHTML = '请输入6-32位英文、数字和符号的组合密码'
                return flag = false
            }else if(inp[1].value.length>32) {
                inp[1].style.disabled = 'disabled'
                var val = inp[1].value.substr(0,32)
                inp[1].value = val
                op.innerHTML = '请输入6-32位英文、数字和符号的组合密码'
            }else if(regNum.test(psw) || regLetter.test(psw) || regSpe.test(psw)){ //弱
                dis.style.backgroundPosition = '-70px -70px'
                    console.log('一种')
                    op.innerHTML = ''

	        }else if(_regNum.test(psw) && _regLetter.test(psw) && _regSpe.test(psw)){ //强
                dis.style.backgroundPosition = '-130px -70px'
                    console.log('三种')
                    op.innerHTML = ''
                    
	        }else{ //中
                dis.style.backgroundPosition = '-100px -70px'
                    console.log('两种')
                    op.innerHTML = ''
                    
            }
            
        }
        inp[1].onblur = function(){
            if(!inp[0].value){
                op.style.display = 'block'
                op.innerHTML = '请输入6-32位英文、数字和符号的组合密码'
                return flag = false
            }
        }
      

        //验证码
        var sjs = document.querySelector('.sjs')
        var huan = document.querySelector('.huan')
        var btn = document.querySelector('button')
        var str = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
        var arr = str.split('')
        
        function sjsf(len){
            var sjsarr = []
            for(i=0;i<len;i++){
                var x = Math.floor(Math.random()*str.length);
                sjsarr.push(str.charAt(x) )
                
            }
            var num = sjsarr.join('')  
            return num
        }
        sjs.innerHTML = sjsf(4)
        
        var siweishu
        huan.onclick = function(){
            sjs.innerHTML = sjsf(4)//没有清除原来的内容
            // sjs.innerHTML = sjsf(4).substr(-4)//全局变量
            siweishu = sjs.innerHTML 
            console.log(siweishu)
        }
        btn.onclick = function(){
            if(inp[2].value == siweishu){
                alert('发布成功')
                return flag = true
            }else{
                return flag = false
                return false
            }
        }

        //短信倒计时   
        var da = form.querySelector('.duanxin')
        var pd = false
        da.onclick = function(){
            pd = true
            if(inp[0].value){
                da.className = 'duanxin1'
                clearInterval(timer)
                var n = 60
                var timer
                timer = setInterval(function(){
                    n--
                    if(n<=0){
                        da.value = '发送验证码'
                        da.disabled = false
                        clearInterval(timer)
                    }else{
                        da.value = n+'s后可重新发送'
                        da.disabled = true
                    }
                },1000)
            }else{
                op.innerHTML = '请输入手机号'
            }
        }
        
        inp[3].onfocus = function(){
            if(!pd){
                op.innerHTML = '请先获取验证码'
                // return flag = false
            }else {
                op.innerHTML = ''
                return flag = false
            }
        }
        inp[3].oninput = function(){
            if(!pd){
                op.innerHTML = '请先获取验证码'
                return flag = false
            }else {
                op.innerHTML = ''
                return flag = true
            }
            if(!inp[3].value){
                return flag = false
            }
        }
        
        //提交
        var btn = form.querySelector('.btn')
        btn.onclick = function(){
            // if(!inp[3].value){
            //     return flag = false
            // }
            if(flag && inp[0].value && inp[1].value && inp[2].value && inp[3].value){
                alert('注册成功，即将跳转登陆页面')
                setCookie('tel',inp[0].value,7)
                setCookie('pass',inp[1].value,7)
            }else{
                alert('每一项必填')
                return false
            }
        }

        //  设置
        function setCookie(key,value,day){
            var date = new Date();
            date.setDate(date.getDate()+day)
            document.cookie = key+'='+value+';expires='+date
        }
        
        // 获取
        function getCookie(key){
            var sC = document.cookie
            var arrC = sC.split('; ')
            var cobj = {}
            for(var i=0;i<arrC.length;i++){
                var arr = arrC[i].split('=')
                cobj[arr[0]] = arr[1]
            }
            return cobj[key]
        }
        //删除
        function removeCookie(key){
            setCookie(key,1,-1)
        }

    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/others.css">
    <script src="../js/lhh.js"></script>
</head>
<body>
    <div class="denglu">
    <h1>
        <img src="../images/注册_03.gif" alt="">
    </h1>
    </div>
    <div class="denglubox">
        <div class="login">
            <img src="../images/duang.jpg" alt="">
            <form action="logoin.html">
                <h2></h2>
                <p>     </p>
                <div class="inp1">
                    <i></i><input type="text" name="tel" placeholder="输入手机/邮箱/用户名" class="tel">
                </div>
                <div class="inp2">
                    <i></i><input type="text" name="pass" placeholder="输入密码" class="pass"></div>
                <div class="detail">
                    <i></i><p>记住我</p><p class="pr"><a href="../html/signup.html">立即注册</a><span> | </span><a href="../html/logoin.html" class="deng">找回密码</a></p>
                </div>
                <button>登录</button>
                <div class="que">
                    <i></i><a href="#" class="qua">遇到问题</a><a href="#" class="ar">手机验证码登录</a>
                </div>
                <h5><em>——————</em>其他方式登录<em>——————</em></h5>
                <div class="san">
                    <a href="#" class="qq"></a><a href="#" class="bo"></a><a href="#" class="xin"></a>
                </div>
            </form>
            <div style="clear: both"></div>
        </div>
    </div>

    <script>
        var form = document.querySelector('form')
        var inp = document.querySelectorAll('input')
        var op = document.querySelector('p')
        var btn = form.querySelector('button')

        btn.onclick = function(){
            console.log(getCookie('tel'))
            console.log(getCookie('pass'))
            if(getCookie('tel')==inp[0].value && getCookie('pass')==inp[1].value){
                form.action = '../index.html'
            }else{
                alert('登录失败')
                return false
            }
        }
        
        //  设置
        function setCookie(key,value,day){
            var date = new Date();
            date.setDate(date.getDate()+day)
            document.cookie = key+'='+value+';expires='+date
        }
        
        // 获取
        function getCookie(key){
            var sC = document.cookie
            var arrC = sC.split('; ')
            var cobj = {}
            for(var i=0;i<arrC.length;i++){
                var arr = arrC[i].split('=')
                cobj[arr[0]] = arr[1]
            }
            return cobj[key]
        }
        //删除
        function removeCookie(key){
            setCookie(key,1,-1)
        }
        
    </script>
</body>
</html>
菲允龙歌
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
作业 02|实现用户注册功能
m0_64018773的博客
06-14 2226
实现用户注册功能 ·前端布局 ·事件绑定处理方法 ·吐司提示 ·实现跳转 ·事件监听 ·单选按钮、复选框
用户注册登录实现大概步骤
weixin_61665636的博客
03-21 1127
2.登录–登录成功的时候，后台为了区分用户是谁，下发令牌token，用户前台持久化localStorage.setItem存储token。(组件派发action：userLogin通过Vuex的异步操作action，执行dispatch操作—执行异步操作，发送post请求(此处因为是前后端分离项目，通过webpack的proxy解决跨域问题)—请求发送到后端后，),路由在进行跳转。用户点击页面登录—前端页面vue组件获取表单的值—判断是登录还是注册，处理请求—后端—返回成功或失败数据。
【Web开发】登录注册功能实现
兴趣使然的创作者
02-07 1万+
一个含注册登录的小demo
2024年【项目实战】登录与注册业务的实现（前端+后端+数据库，抖音音视频开发
最新发布
2401_84434331的博客
05-06 989
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
简单的登录注册-注册
m0_69045017的博客
04-02 344
<!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>D.
简单版登录注册
llihao
04-14 178
首先,开始写代码之前要做好准备工作俗话说得好,磨刀不误砍材工,先看一下需要准备什么东西呢! 1.网络权限 2.工具类 3.依赖 正式进入代码部分,首先呢是我们的mvp框架部分,这次说的这个框架跟之前用的方式不太一样. V层: public interface MainView { //登录 public void getViewData(String viewData...
通过Nodejs搭建网站简单实现注册登录流程
10-16
主要介绍了通过Nodejs搭建网站简单实现注册登录流程，Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。,需要的朋友可以参考下
SpringBoot实现简单的登录注册（超级详细）
04-12
SpringBoot实现简单的登录注册（超级详细），配合博客讲解，快速打通前后端。博客地址：https://blog.csdn.net/qq_35207086/article/details/117165939
Android实现注册登录界面的实例代码
08-27
Android 实现注册登录界面的实例代码 Android 是一款流行的移动操作系统，它提供了强大的开发环境和丰富的开发工具，使得开发者可以轻松地创建各种移动应用程序。其中，注册登录界面是一个非常重要的组件，它为用户...
Java简易登录注册功能实现代码解析
08-19
Java简易登录注册功能实现代码解析 Java简易登录注册功能实现代码解析是Java开发中的一种基本功能，通过示例代码介绍了Java简易登录注册功能实现代码解析的详细过程，对大家的学习或者工作具有一定的参考学习价值。...
实现用户注册登录的简单程序
11-10
简单实现用户注册登录系统： 包括登录页面、注册页面、主页面； 对前端提交的数据，通过js进行合法性判断（用户名只能使用字母数字下划线组成，密码只能使用数字，注册时，两次输入的密码必须相同），不符合要求，不...
简单的登录注册
程序员小白
05-01 611
1.创建user表 CREATE table user( id int PRIMARY key auto_increment COMMENT'用户ID', username VARCHAR(55) COMMENT'用户名', password VARCHAR(55) COMMENT'密码' ); insert into user values(1,'zs','12345'); insert into user values(2,'ls','123456'); 2.创建实体类（pojo包）
一个简单的登录注册界面流程介绍
qq_43717065的博客
04-11 9918
登录页面实现 其他页面的实现可以到github上克隆下来 一、用户登录 1、密码登录 流程： 用户输入密码； 表单使用正则验证用户名和密码格式； 点击登录，对密码进行加密，并发送登录验证请求； 后台验证用户登录信息是否正确； 正确则生成token返回至前端，否则提示用户名或密码错误。 2、忘记密码 流程： 输入手机号； 表单正则验证手机号格式； 点击获取验证码按钮； 后台验证手机号是否存在； 存在，则生成验证码，加密后保存在服务器session当中，否则提示手机号不存在； 获取到验证码并输入；.
JavaWeb实现用户登录注册功能实例
热门推荐
afanti222的博客
03-08 17万+
一、Servlet+JSP+JavaBean开发模式(MVC)介绍　　Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用，在这种模式下，servlet负责处理用户请求，jsp负责数据显示，javabean负责封装数据。 Servlet+JSP+JavaBean模式程序各个模块之间层次清晰，web开发推荐采用此种模式。　　这里以一个最常用的用户登录注册程序来讲解Servl...
简单制作登录注册页面
weixin_43132106的博客
09-05 6万+
在一个网页中，html负责页面布局和内容，css负责组件具体样式，JS则与后台进行交互。 在设计网页前先介绍DIV，简单来说就是一个在网页上分割区域的方块。在DIV里面可以添加组件，包括另外的DIV。 制作登录界面。登录界面一般有两个文本框，分别用来获取用户的用户名和密码。我们也考虑用户忘记密码和未进行注册的情况，故也要加上这两个功能区域。 首先我们为登录界面设置一个标题： ...
java简单注册登录
qq_41995845的博客
09-05 568
基本上所有的涉及个人账号的网站、游戏、APP，都需要登录，并且使用很频繁。 下面个人登录二级菜单开源： 1、个人信息类 package com.g.bigReward1; public class Member { private String name; private String accountNumber; private Integer password; public Member() { super(); // TODO Auto-generated constructor
注册功能的实现
Sunny_D
10-28 6095
使用Django框架，实现一个简单的登录功能。 业务逻辑： 1、判断用户的请求方式。 2、如果是GET请求，显示注册页面。 3、如果是POST请求（表单提交，进行注册），判断注册的内容是否合理。 4、发送邮件，激活账号。 5、注册成功. 1、判断用户的请求方式 当用户访问到注册页面的时候，其实已经进行了一个GET请求，再点击注册的时候，又进行了一次POST请求。 可以使用浏览器的
表单实现登录注册功能
czl389的专栏
08-24 1万+
为了开发出一个家教信息服务网站，家教注册登录，家教信息发布这些都需要通过表单还实现。 系列文章汇总： 一、整体设计：家教信息服务平台的开发 二、前端设计：表单实现登录注册功能 三、后台设计：MySQL数据库的增删改查 登录/注册的实现 在"我是大学生"子网页下设置两个超链接，完成用户的登录/注册 分步注册页： 分步表单这一部分是从网上搜...
django简单实现注册登录
09-05
在Django中，实现注册和登录功能是相对简单的。以下是一个简单的步骤： 1. 创建Django项目和应用：首先，创建一个Django项目并在项目中创建一个应用。 ```bash django-admin startproject myproject cd ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值