序

一个以js验证表单的简洁的注册登录页面，不多说直接上图

效果

主要文件

完整代码

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>

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>

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:;

    padding:;

    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;

}

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;

    }

}

form_logo.png Logo照片

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

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

  1. PHP实现一个简陋的注册登录页面

    PHP实现一个简陋的注册登录页面 今天来水一篇没有**用的 /滑稽脸,代码简陋臃肿考虑不全,各位大佬轻喷,还望不吝赐教. 首先考虑了一下需要至少四个页面:register.html.register. ...

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

    由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...

  3. 注册登录页面修订-Python使用redis-手机验证接口-发送短信验证

    登录页面修订 views.Login.vue <template> <div class="login box"> <img src="@/ ...

  4. PHP实践项目【1】：注册登录页面

    在我们这个项目里面,一共用到了5个php文件,他们分别是: login.php 登录页面 logincheck.php 登录检测php文件 register.php 新用户注册页面 regcheck. ...

  5. jQuery跳转到另一个页面以及原生js跳转到另一个页面

    1.原生js我们可以利用http的重定向来跳转 window.location.replace("https://www.cnblogs.com/pythonywy/"); 2.原 ...

  6. node.js+mysql用户的注册登录验证

    下面代码实现的功能是:用node.js连接mysql实现用户的注册和登录,这里主要实现的是后端的验证代码,前端显示部分没具体写出. 整个程序的流程是这样的: 1.首先建立数据库reji,数据表user ...

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

    本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...

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

    首先新建文件夹命名koa-server,npm init,相关包的安装就不说了,这是我的package.json 新建index.js文件,编码如下,config全局配置不用管,redis是一个简单的 ...

  9. js实现一个简单的登录页面

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. Android最佳实践之UI篇

    http://sr1.me/way-to-explore/2015/03/25/best-practice-for-android-ui.html

  2. truncate/drop表非常慢，怎么办？用硬链接，极速体验

    这个这个,我必须花巨大篇幅,记录下今天清空表记录的英雄壮举,可知道一个drop操作,执行了一下午啊一下午,这是要急出翔的节奏..呵呵,下面开始 我的需求:某表因历史原因,积压了1亿条记录,约占360G ...

  3. CSS HACK 及常见问题

    一.CSS常用hack 1.方式一:条件注释法 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式.举例如下 只在IE下生效 <!--[if IE]> 这段文字只在IE ...

  4. 【软件分析与挖掘】A Comparative Study of Supervised Learning Algorithms for Re-opened Bug Prediction

    摘要: 本文主要是评估多种监督机器学习算法的有效性,这些算法用于判断一个错误报告是否是reopened的,算法如下: 7种监督学习算法:kNN,SVM, SimpleLogistic,Bayesian ...

  5. 【转载】div层调整zindex属性无效原因分析及解决方法

    在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的pos ...

  6. 3-5年的PHPer常见的面试题

    看到有很多,的总结一下,比较适合有一定经验的PHPer 1.平时喜欢哪些php书籍及博客?CSDN.虎嗅.猎云 2.js闭包是什么? 3.for与foreach哪个更快? 4.php鸟哥是谁?能不能讲 ...

  7. mvc4.0添加EF4.0时发生编译时错误

    解决此问题是因为MVC4.0默认未添加EF4.0的引用,EF4.0引用的是System.Data.Entity.dll, Version=4.0.0.0, 解决办法: 在web.config文件sys ...

  8. asynchronous-logging-with-log4j-2--转

    原文地址:https://dzone.com/articles/asynchronous-logging-with-log4j-2 Log4J 2 is a logging framework des ...

  9. Hadoop入门进阶课程6--MapReduce应用案例

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  10. GoodsAndStaffManagermentSystem----Sprint 计划1

    需求分析:茗仕茶业管理系统是个商品-员工综合管理系统. 员工管理:设置不同的职位,不同职位有不同访问权限.员工只能卖商品,财务员只有查看商品的库存量和商品销售记录:公司老板可以查看所有信息--    ...