原生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/common_form.css">
</head>
<body>
    <header>
        <div class="header-line"></div>
    </header>
    <div class="content">
        <img class="content-logo" src="img/form_logo.png" alt="logo">
        <h1 class="content-title">创建账户</h1>
        <div class="content-form">
            <form method="post" action="" onsubmit="return submitTest()">
                <div id="change_margin_1">
                    <input class="user" type="text" name="user" placeholder="请输入用户名" onblur="oBlur_1()" onfocus="oFocus_1()">
                </div>
                <!-- input的value为空时弹出提醒 -->
                <p id="remind_1"></p>
                <div id="change_margin_2">
                    <input class="password" type="password" name="password" placeholder="请输入密码" onblur="oBlur_2()" onfocus="oFocus_2()">
                </div>
                <!-- input的value为空时弹出提醒 -->
                <p id="remind_2"></p>
                <div id="change_margin_3">
                    <input class="content-form-signup" type="submit" value="创建账户">
                </div>
            </form>
        </div>
        <div class="content-login-description">已经拥有账户？</div>
        <div><a class="content-login-link" href="log_in.html">登录</a></div>
    </div>
<script src="js/common_form_test.js"></script>
</body>
</html>

2 log_in.html 登录表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>log-in</title>
    <link rel="stylesheet" href="css/common_form.css">
</head>
<body>
    <header>
        <div class="header-line"></div>
    </header>
    <div class="content">
        <img class="content-logo" src="img/form_logo.png" alt="logo">
        <h1 class="content-title">登录</h1>
        <div class="content-form">
            <form method="post" action="" onsubmit="return submitTest()">
                <div id="change_margin_1">
                    <input class="user" type="text" name="user" placeholder="请输入用户名" onblur="oBlur_1()" onfocus="oFocus_1()">
                </div>
                <!-- input的value为空时弹出提醒 -->
                <p id="remind_1"></p>
                <div id="change_margin_2">
                    <input class="password" type="password" name="password" placeholder="请输入密码" onblur="oBlur_2()" onfocus="oFocus_2()">
                </div>
                <!-- input的value为空时弹出提醒 -->
                <p id="remind_2"></p>
                <div id="change_margin_3">
                    <input class="content-form-signup" type="submit" value="登录">
                </div>
            </form>
        </div>
        <div class="content-login-description">没有账户？</div>
        <div><a class="content-login-link" href="sign_up.html">注册</a></div>
    </div>
<script src="js/common_form_test.js"></script>
</body>
</html>

3 common_form.css 表单css样式

/*重置样式*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub
, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0
}
body {
    font-family: "微软雅黑";
    background: #f4f4f4;
}

/*header*/
.header-line {
    width: 100%;
    height: 4px;
    background: #0dbfdd;
}

/*content*/
.content {
    width: 28%;
    margin: 70px auto 0;
    text-align: center;
}
.content-logo {
    width: 80px;
    height: 80px;
}
.content-title {
    margin: 10px 0 25px 0;
    font-size: 2em;
    color: #747474;
    font-weight: normal;
}
.content-form {
    width: 100%;
    padding: 36px 0 20px;
    border: 1px solid  #dedede;
    text-align: center;
    background: #fff;
}
.content-form form div {
    margin-bottom: 19px;
}
.content-form form .user,
.content-form form .password {
    width: 77%;
    height: 20px;
    padding: 10px;
    font-size: 1em;
    border: 1px solid  #cccbcb;
    border-radius: 7px;
    letter-spacing: 1px;
}
.content-form form input:focus {
    outline: none;
    -webkit-box-shadow: 0 0 5px #0dbfdd;
            box-shadow: 0 0 5px #0dbfdd;
}
.content-form-signup {
    width: 84%;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid  #cccbcb;
    border-radius: 7px;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    background: #0dbfdd;
    cursor: pointer;
}
.content-form-signup:hover {
    background: #0cb3d0;
}
.content-form-signup:focus {
    outline: none;
    border: 1px solid  #0cb3d0;
}
.content-login-description {
    margin-top: 25px;
    line-height: 1.63636364;
    color: #747474;
    font-size: .91666667rem;
}
.content-login-link {
    font-size: 16px;
    color: #0dbfdd;
    text-decoration: none;
}

/*输入框无内容便提示*/
#remind_1,
#remind_2 {
    width: 76%;
    margin: 0 auto 2px;
    text-align: left;
    font-size: .2em;
    color: #f00;
}

4 common_form_test.js 注册登录脚本

// 全局变量a和b，分别获取用户框和密码框的value值
var a = document.getElementsByTagName("input")[0].value;
var b = document.getElementsByTagName("input")[1].value;

//用户框失去焦点后验证value值
function oBlur_1() {
    if (!a) { //用户框value值为空
        document.getElementById("remind_1").innerHTML = "请输入用户名！";
        document.getElementById("change_margin_1").style.marginBottom = 1 + "px";
    } else { //用户框value值不为空
        document.getElementById("remind_1").innerHTML = "";
        document.getElementById("change_margin_1").style.marginBottom = 19 + "px";
    }
}

//密码框失去焦点后验证value值
function oBlur_2() {
    if (!b) { //密码框value值为空
        document.getElementById("remind_2").innerHTML = "请输入密码！";
        document.getElementById("change_margin_2").style.marginBottom = 1 + "px";
        document.getElementById("change_margin_3").style.marginTop = 2 + "px";
    } else { //密码框value值不为空
        document.getElementById("remind_2").innerHTML = "";
        document.getElementById("change_margin_2").style.marginBottom = 19 + "px";
        document.getElementById("change_margin_3").style.marginTop = 19 + "px";
    }
}

//用户框获得焦点的隐藏提醒
function oFocus_1() {
    document.getElementById("remind_1").innerHTML = "";
    document.getElementById("change_margin_1").style.marginBottom = 19 + "px";
}

//密码框获得焦点的隐藏提醒
function oFocus_2() {
    document.getElementById("remind_2").innerHTML = "";
    document.getElementById("change_margin_2").style.marginBottom = 19 + "px";
    document.getElementById("change_margin_3").style.marginTop = 19 + "px";
}

//若输入框为空，阻止表单的提交
function submitTest() {
    if (!a && !b) { //用户框value值和密码框value值都为空
        document.getElementById("remind_1").innerHTML = "请输入用户名！";
        document.getElementById("change_margin_1").style.marginBottom = 1 + "px";
        document.getElementById("remind_2").innerHTML = "请输入密码！";
        document.getElementById("change_margin_2").style.marginBottom = 1 + "px";
        document.getElementById("change_margin_3").style.marginTop = 2 + "px";
        return false; //只有返回true表单才会提交
    } else if (!a) { //用户框value值为空
        document.getElementById("remind_1").innerHTML = "请输入用户名！";
        document.getElementById("change_margin_1").style.marginBottom = 1 + "px";
        return false;
    } else if (!b) { //密码框value值为空
        document.getElementById("remind_2").innerHTML = "请输入密码！";
        document.getElementById("change_margin_2").style.marginBottom = 1 + "px";
        document.getElementById("change_margin_3").style.marginTop = 2 + "px";
        return false;
    }
}

5 form_logo.png Logo照片

到这里，一个简单的注册登录页面就完成了，后面会持续更新，使之更强大

时间： 2024-08-11 01:18:32

原生js验证简洁美观注册登录页面的相关文章

Node.js原生及Express方法实现注册登录原理

由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然实际中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>user</title> </head> <body> 用户:<inp

简洁的用户登录页面设计

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

使用原生js的scrollTop，刷新进入页面定位到某一个dom元素

原生js的scrollTop即可,与jquery方法的区别是jquery做了兼容封装.我想要实现的功能是时间定位,根据当前时间定位到滚动区的时间位置.页面为移动端页面,上下固定位置,中部为1小时4格的选择区域,从0点到24点. 开始我想发出现了偏差,总想定位到某个dom,这样使得scrollTop一直是0,怎么设置都不行,后来仔细分析才发现要设置在超出当前可视区域的dom上才可以. 所以设置在外层overflow-x:scroll;的dom上即可,根据时间匹配dom位置,根据索引及每格的高度计算

yii2 页面上编写js代码，并注册到页面底部

koa2+redis+jwt token验证，简单注册登录

首先新建文件夹命名koa-server,npm init,相关包的安装就不说了,这是我的package.json 新建index.js文件,编码如下,config全局配置不用管,redis是一个简单的get和set操作的封装,也不用管 const bodyParser = require("koa-bodyParser"); const Koa = require("koa"); const koaStatic = require("koa-static&

原生js实现简洁的返回顶部组件

本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~ 返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置.实现思路也很容易,只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可.本文抛弃所有加速减速的酷炫效果,回归软件的本质,提供一个最简洁的实现,只追求实用性,不追求所谓的用户体验,效果

JS实现居中漂亮的登录页面

效果图: HTML代码如下: 1 <div id="container"> 2 <div class="login"> 3 <div class="logo">LOGO</div> 4 <form action="" method="post" > 5 <div class="public-input"> 6 <

以小见大：如何设计注册登录页？

一个合格的注册登录页面,应该是具有清晰的操作流程. 朋友说某个APP不错,下载后正准备好好体验一番,却被糟糕的注册登录页面弄的精疲力竭,无奈最终只能放弃.注册登录流程能让用户扭头就走,也能让产品获得新用户的芳心. 一个合格的注册登录页面,应该是具有清晰的操作流程,良好的交互细节和美观的视觉设计. 清晰的操作流程 APP的注册登录有四种情况: 不需要注册登录常见于系统自带的工具类APP,像经常使用的闹钟.日历.计算器等等:一些简单的第三方APP:乐流,榫卯等. 这些APP的特点都是功能相对单一,

玩转JavaScript的Web API : 原生js操控显式HTML元素

之前做过两道前端,阿里和网易各一道.下文内容和解题的核心并无关系,只是当时想了解jQuery那么处理原生js的原理是什么,所以小结一下. 题目一:判断两个矩形元素是否重叠. 开始无尽的跑偏.... Html元素都是HTMLElement实例,下例将div换成script.html都成立. HTMLElement继承自Element,Element继承自Node. 定义一个长宽都是500px的红色div. 但是.style.height的方式获取不到高度值.如果使用style设置高度是有效的,再读