首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 17, 2016

序

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

效果

原生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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
js function使用心得
May 10 Javascript
JavaScript 面向对象编程（2） 定义类
May 18 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
Javascript的闭包详解
Dec 26 Javascript
浅析JS运动
Dec 28 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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
哥伦比亚购物网站(5) 泰国购物网站(30) 荷兰购物网站(99) 瑞典购物网站(55) 南非购物网站(8) 欧洲购物网站(15) 芬兰购物网站(10) 比利时购物网站(33) 土耳其购物网站(10) 葡萄牙购物网站(13)
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
jQuery最佳实践完整篇
2011/08/20 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）
2016/11/09 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
Vue精简版风格概述
2018/01/30 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Python FTP操作类代码分享
2014/05/13 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
viagogo意大利票务平台：演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
三好学生自我鉴定
2013/12/17 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
高一军训决心书
2015/02/05 职场文书
电影圆明园观后感
2015/06/03 职场文书
中秋节主题班会
2015/08/14 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
深入浅出的讲解：信号调制到底是如何实现的
2022/02/18 无线电