原生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验证简洁注册登录页面

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

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

Javascript 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
JavaScript实现简单动态表格
Dec 02 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
You might like
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
大学毕业自我评价
2014/02/02 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
文明单位创建材料
2014/12/24 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
opencv检测动态物体的实现
2021/07/21 Python