JavaScript 基础，登录前端验证

<script></script>的三种用法：
1. 放在<body>中
2. 放在<head>中
3. 放在外部JS文件中
三种输出数据的方式：
1. 使用 document.write() 方法将内容写到 HTML 文档中。
2. 使用 window.alert() 弹出警告框。
3. 使用 innerHTML 写入到 HTML 元素。
  1. 使用 "id" 属性来标识 HTML 元素。
  2. 使用 document.getElementById(id) 方法访问 HTML 元素。
  3. 用innerHTML 来获取或插入元素内容。
登录页面准备：
1. 增加错误提示框。
2. 写好HTML+CSS文件。
3. 设置每个输入元素的id
定义JavaScript 函数。
1. 验证用户名6-20位
2. 验证密码6-20位
onclick调用这个函数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>login</title><link href="../static/css/login.css" rel="stylesheet" type="text/css"><script>function myLogin() {var oUname = document.getElementById("uname");var oError = document.getElementById("error_box1");if(oUname.value.length<6){oError.innerHTML ="用户名至少六位！"}else if(oUname.value.length>10){oError.innerHTML ="用户名最多十位！"}var oUpass = document.getElementById("upass");var oError = document.getElementById("error_box2");if( oUpass .value.length<6){oError.innerHTML ="密码至少六位！"}else if(oUpass .value.length>10){oError.innerHTML ="密码最多十位！"}}</script>
</head>
<body ><div class="bor"><form id="login" action="" method="post"><h2 align="center"><div id="header"><h3 align="center" >登录</h3></div><div class="input_box">username:<input id="uname" type="text" placeholder="请输入用户名"></div><div class="input_box">password:<input id="upass" type="password" placeholder="请输入密码"></div><div id="error_box1" ><br></div><div id="error_box2" ><br></div><div class="input_box"><button onclick="myLogin()">登录</button><button >重置</button></div></h2></form></div>
</body>
</html>

html{font-family: 华文细黑;}
.bor{position:absolute;top:50%;left:50%;margin-top: -200px;margin-left:-200px;widht:500px;height:300px;}
body{background:url("http://p1.so.qhimgs1.com/bdr/_240_/t010d4fb773a19d42d1.jpg") no-repeat;width:100%;height:auto;overflow:hidden;background-size:100%;
}
#error_box1{color: red;}
#error_box2{color: red;
}

转载于:https://www.cnblogs.com/wk15/p/7739701.html

JavaScript 基础，登录前端验证相关推荐

php js实现登录注册,JavaScript实现登录注册验证
学习需要坚持,堕落了一星期,学也不是,玩也不对,今天终于跑到图书馆来学习. 言归正传,今天要做的就是登录注册页面的验证和与数据库连接的操作.这里用的是JQ和layer插件,在前面的文章应该有提到过,不 ...
javascript基础修炼——前端路由的基本原理
前端路由,顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果. [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十 ...
原生JavaScript实现登录注册前端验证
原生JavaScript实现登录注册前端验证功能:实现一个简单的前端登录页面的验证, 废话不多说,直接上代码... 登录窗口代码段... //html <div class="log ...
前端学习总结：3、javascript基础
前端学习总结:3.javascript基础文章目录前端学习总结:3.javascript基础 1.概述 1.1 什么是JavaScript? 1.1.1 概念 1.1.2 作用 1.2 JavaS ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
Web前端之JavaScript基础
Web前端之JavaScript基础 JavaScript介绍变量变量类型基本的数据类型Number String Boolean underfined null typeof运算符引用的数据 ...
php注册登录课件,登录注册验证(javascript)-php教学课件5.pdf
登录注册验证(javascript)-php教学课件5.pdf 还剩 33页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,很抱歉,此页已超出免费预览范围啦! 如果喜欢就下载吧,价低环保! ...
前端实现登录拼图验证
前言不知各位朋友现在在web端进行登录的时候有没有注意一个变化,以前登录的时候是直接账号密码通过就可以直接登录,再后来图形验证码,数字结果运算验证,到现在的拼图验证.这一系列的转变都是为了防止机器操 ...
前端小白学习路线及知识点汇总（三）-- JavaScript基础
前端小白学习路线及知识点汇总(三)-- JavaScript基础一. JavaScript的组成 ECMAScript:由ECMA国际进行标准化的一门编程语言,往往被称为JavaScript或Jsc ...

JavaScript 基础，登录前端验证

JavaScript 基础，登录前端验证相关推荐

最新文章

热门文章