编程 Javascript

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

Posted in Javascript onDecember 17, 2016

序

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

效果

原生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照片

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

stormchou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery 层次选择器siblings与nextAll的区别介绍

Aug 02 Javascript

JQuery记住用户名和密码的具体实现

Apr 04 Javascript

利用函数的惰性载入提高javascript代码执行效率

May 05 Javascript

JS获取当前日期时间并定时刷新示例

Mar 04 Javascript

js仿土豆网带缩略图的焦点图片切换效果实现方法

Feb 23 Javascript

jQuery中$this和$(this)的区别介绍（一看就懂）

Jul 06 Javascript

聊一聊JavaScript作用域和作用域链

May 03 Javascript

jQuery获取浏览器类型和版本号的方法

Jul 05 Javascript

vue 虚拟dom的patch源码分析

Mar 01 Javascript

监听angularJs列表数据是否渲染完毕的方法示例

Nov 07 Javascript

Angular8 Http拦截器简单使用教程

Aug 20 Javascript

js判断两个数组相等的5种方法

May 06 Javascript

javascript 数组去重复(在线去重工具)

Dec 17 #Javascript

jQuery Validate验证框架详解(推荐)

Dec 17 #Javascript

Bootstrap CSS组件之导航条(navbar)

Dec 17 #Javascript

Bootstrap CSS组件之导航(nav)

Dec 17 #Javascript

Bootstrap CSS组件之面包屑导航(breadcrumb)

Dec 17 #Javascript

Bootstrap CSS组件之分页(pagination)和翻页(pager)

Dec 17 #Javascript

Bootstrap CSS组件之大屏幕展播

Dec 17 #Javascript