原生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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
浅析JS运动
Dec 28 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
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
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
iOS10推送通知开发教程
2016/09/19 PHP
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
vue.js实现备忘录功能的方法
2017/07/10 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
python实现二叉树的遍历
2017/12/11 Python
Python星号*与**用法分析
2018/02/02 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python实现微信小程序自动回复
2018/09/10 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
项目经理的岗位职责
2013/11/23 职场文书
公司委托书格式范文
2014/04/04 职场文书
公司委托书格式
2014/08/01 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers