JavaScript实现简易登录注册页面

本文实例为大家分享了JavaScript实现简易登录注册页面的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>login</title>
    <!-- <link rel="stylesheet" type="text/css" href="pageChange.css" /> -->
    <!-- <script src="pageChange.js"></script> -->
</head>
 
<body>
    <div class="control">
        <div class="item">
            <div class="active">登录</div>
            <div>注册</div>
        </div>
        <div class="content">
            <div style="display: block;" class="box1">
                <p>账号</p>
                <input type="text" placeholder="username" name="use2" />
                <span></span>
                <p>密码</p>
                <input type="password" placeholder="password" name="use2" />
                <span></span>
                <br/>
                <input type="submit" value="登录" />
            </div>
            <div class="box2">
                <p>用户名</p>
                <input type="text" placeholder="username" name="use1" />
                <span>请输入以字母开头至少4位数用户名</span>
                <p>密码</p>
                <input type="password" placeholder="password" name="use1" />
                <span>请输入至少六位数的密码</span>
                <p>邮箱</p>
                <input type="text" placeholder="email" name="use1" />
                <span>请输入邮箱账号</span>
                <br/>
                <input type="submit" value="注册" />
            </div>
        </div>
    </div>
</body>
 
</html>

<style>
    * {
        margin: 0;
        padding: 0;
    }
 
    .error {
        color: red;
        font-size: 14px;
 
    }
 
    .cg {
        color: greenyellow;
        font-size: 14px;
    }
 
    body {
        background: #f3f3f3;
    }
 
    .control {
        width: 340px;
        background: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
    }
 
    .item {
        width: 340px;
        height: 60px;
        background: #eeeeee;
    }
 
    .item div {
        width: 167px;
        height: 60px;
        display: inline-block;
        color: black;
        font-size: 18px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
    }
 
    .content {
        width: 100%;
    }
 
    .content div {
        margin: 20px 30px;
        display: none;
        text-align: left;
    }
 
    p {
        color: #4a4a4a;
        margin-top: 30px;
        margin-bottom: 6px;
        font-size: 15px;
    }
 
    .content input[type="text"],
    .content input[type="password"] {
        width: 100%;
        height: 40px;
        border-radius: 3px;
        border: 1px solid #adadad;
        padding: 0 10px;
        box-sizing: border-box;
    }
 
    .content input[type="submit"] {
        margin-top: 40px;
        width: 100%;
        height: 40px;
        border-radius: 5px;
        color: white;
        border: 1px solid #adadad;
        background: #00dd60;
        cursor: pointer;
        letter-spacing: 4px;
        margin-bottom: 40px;
    }
 
    .active {
        background: white;
    }
 
    .item div:hover {
        background: #f6f6f6;
    }
</style>
 
<script>
 
    window.onload = function () {
        var item = document.querySelectorAll(".item");
        var it = item[0].querySelectorAll("div")
        var content = document.querySelectorAll(".content");
        var con = content[0].querySelectorAll("div");
        var na1 = document.querySelectorAll('[name="use1"]')
        var na2 = document.querySelectorAll('[name="use2"]')
        var span1 = document.querySelectorAll('.box2 span')
        var span2 = document.querySelectorAll('.box1 span')
        var zc = document.querySelector('[value="注册"]')
        var dl = document.querySelector('[value="登录"]')
 
        console.log(span2)
        var userReg = /^[a-zA-Z][a-zA-Z0-9]{3,9}$/
        var telReg = /^[0-9a-zA-Z].{4,14}$/
        var emailReg = /(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)|(^[1-9]\d{4,10}@qq\.com$)/
 
        for (let i = 0; i < it.length; i++) {
            it[i].onclick = function () {
                for (let j = 0; j < it.length; j++) {
                    it[j].className = '';
                    con[j].style.display = "none";
                }
                this.className = "active";
                it[i].index = i;
                con[i].style.display = "block";
            }
        }
        
        var flag = false
 
        // 封装
        function cf(trr, srnr, index, str, str1) {
            var a1 = trr.test(srnr)
            if (!a1) {
                index.className = 'error'
                index.innerText = str
                return true
            } else {
                index.className = 'cg'
                index.innerText = str1
                return false
 
            }
 
        }
        // 正则验证
        na1[0].oninput = () => cf(userReg, na1[0].value, span1[0], 'x 用户名不符合规范', '√ 通过验证')
 
        na1[1].oninput = () => cf(telReg, na1[1].value, span1[1], 'x 密码不符合规范', '√ 通过验证')
 
        na1[2].oninput = () => cf(emailReg, na1[2].value, span1[2], 'x 邮箱书写不符合规范', '√ 通过验证')
 
        var arr=[]
        zc.onclick = () => {
            flag = true
            if (na1[0].value === '') {
                span1[0].className = 'error'
                return flag = false
            }
            else if (na1[1].value === '') {
                span1[1].className = 'error'
                return flag = false
            }
            else if (na1[2].value === '' || span1[2].className == 'error') {
                span1[2].className = 'error'
                return flag = false
            } else {
                if (flag && na1[2].className != 'error') { 
 
                    // for (let i = 0; i < na1.length; i++) {
                    //     // arr[i]=arr.push(na1[i].)
                    //     console.log(arr[i])
                    //     na1[i].value = ''                       
                    // }
                    alert('注册成功')
                }
            }
        }
 
        dl.onclick = function () {
            if (na1[0].value != na2[0].value || na1[0].value == '') {
                span2[0].className = 'error'
                span2[0].innerText = '用户名不一致'
            } else {
                span2[0].innerText = ''
                span2[0].className = ''
            }
            if (na1[1].value === '' || na1[1].value != na2[1].value) {
                span2[1].className = 'error'
                span2[1].innerText = '密码错误'
            } else {
                span2[1].innerText = ''
                span2[1].className = ''
            }
            if (flag) {
                alert('登录成功')
            }
            else if(na1[0].value != na2[0].value&& na1[1].value != na2[1].value) {
                
                alert('账号不存在')
            }     
        }
    }
</script>

效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-01-10

js实现登录与注册界面

完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括: 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> <script type="

vue.js实现用户评论、登录、注册、及修改信息功能

vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo

js实现登录注册框手机号和验证码校验(前端部分)

开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q

JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)

下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据. Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式. 这里以一个最常用的用户登录注册程序来讲解Servlet+JS

使用JSP实现简单的用户登录注册页面示例代码解析

实验要求: 将实验2中的系统用户登录和注册页面改为JSP页面,并部署自己的Web应用于Tomcat服务器中 具体要求: 完成登录JSP页面设计和注册页面设计 在登录页面表单中使用request对象获取用户信息,建立新的JSP页面完成登录验证(用户名和密码自己指定即可). 验证结果显示(如登录成功/用户名密码错误,可以使用JavaScript,也可以使用新的JSP页面). 在注册页面表单中使用request对象获取用户注册信息(注册项目由自己指定),在新的JSP页面显示用户注册信息,并提示注册成功

Servlet+JavaBean+JSP打造Java Web注册与登录功能

采用Java Web所实现的MVC结构图如下,其中控制器部分采用Servlet来实现,模型部分采用JavaBean来实现,而大部分的视图采用Jsp页面来实现. 思想基础 JSP+JavaBean两层结构工作原理应该是比较熟悉的,也比较好理解. 但是有一点必须要清楚就是用户通过浏览器来发送网页的请求,此请求到达服务器后在服务器端查找对应的网页,如果是首次请求(第二次就不用解释执行了),对于JSP来说要生成Servlet,然后通过Servlet引擎来执行 Servlet,把调用JavaBean的结果

JSP实现用户登录、注册和退出功能

本文讲述使用JSP实现用户登录,包括用户登录.注册和退出功能等. 1.系统用例图 2.页面流程图 3.数据库设计 本例使用oracle数据库 创建用户表 包括id,username,password和email,共4个字段 -- Create table create table P_USER ( id VARCHAR2(50) not null, username VARCHAR2(20), password VARCHAR2(20), email VARCHAR2(50) ) tablesp

node.js实现登录注册页面

本文实例为大家分享了node.js登录注册页面展示的具体代码,供大家参考,具体内容如下 首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <

JSP+MySQL实现网站的登录与注册小案例

为了练手,我就自己试着做了一个网站的登录与注册的小案例.由于没有做美化处理,所以界面并不是很好看. 网站实现的功能如下:  •用户首次注册功能  •用户登录功能 下面我将会分模块展示 注册模块 首先需要一个注册界面,如下register.jsp: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOC

原生js验证简洁注册登录页面

序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css

Vue.js实现一个SPA登录页面的过程【推荐】

技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

详解基于原生JS验证表单组件xy-form

原生form表单 form 表单元素大家可能都用到过,除了可以提交表单外,还有一些内置的表单校验,比如 require . minlength . maxlength ,还有各种类型的 input ,比如 type=email 可以校验是否是邮箱类型,如果不满足还可以使用 pattern 进行正则校验. 原生的表单验证大概如下 虽然丑陋,功能却很强大,基本可以满足一般的需求,不过ui终究过于原生,而且也不方便自定义,所以很多情况下这种默认的表单验证并不使用. 下面来看看 xy-form 下的效果

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果.并且基于 Vue.js 2.0 全家桶.具体效果如下图所示: 最终效果可以翻到文章最后观看. 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示: 教程如下所示: 从图中以及我

用原生JS实现爱奇艺首页导航栏代码实例

最近接到领导的任务,要给外面的学生上几节前端课,备课的时候准备了一些小项目,在此记录一下. 以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> <meta charset="utf-8"> <style type="text/css"> * { padding: 0; margin: 0; } .wrap

原生JS与JQ获取元素的区别详解

这篇文章主要介绍了原生JS与JQ获取元素的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象): (1)通过元素ID获取:document.getElementById(),示例如下: 我们在控制台输出,结果如下: 可以

原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity.transition.box-shadow这三个属性. 1.opacity CSS3 opacity 属性 实例 设置一个div元素的透明度级别: div { opacity:0.5; } 在此页底部有更多的例子. 浏览器支持 Internet ExplorerFirefoxOpera

JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能.分享给大家供大家参考,具体如下: 源码引用的js.jquery都是在线的,代码拷到本地就能运行 登录: <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, m

使用正则表达式验证登录页面输入是否符合要求

先给大家展示下效果图: 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> $(f

node.js+captchapng+jsonwebtoken实现登录验证示例

提到登录验证,大家肯定能想到的就是12306的验证码了吧.12306为了防止刷票,可以说是煞费苦心,验证码也越来越难识别,最终即使是人也可能识别不了了. 今天,小编就给大家说一下node如何实现图片验证码,以及使用token验证登录.学习本文你将学到: 1.使用captchapng生成图片验证码 2.使用jsonwebtoken实现登录验证 一.图片验证码生成(最后有全部代码) 首先,我们理一下流程,第一步服务器要随机生成一组四位数. 第二步,将这四位数用canvas绘图生成图片. 第三步,我们