JavaScript 基础，登录验证
1.<script></script>的三种用法：
a.放在<body>中
b.放在<head>中
c.放在外部JS文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间</title>
<script type="text/javascript" src="../static/js2.js"></script>
</head>
<body>
<p>Hello</p>
<script>
document.write(Date())
</script>
<button type="button" onclick=window.alert("用户名不能以数字开头")>Login</button>
</body>
</html>
2.三种输出数据的方式：
a.使用 document.write() 方法将内容写到 HTML 文档中。
b.使用 window.alert() 弹出警告框。
c.使用 innerHTML 写入到 HTML 元素。
<1>使用 "id" 属性来标识 HTML 元素。
<2>使用 document.getElementById(id) 方法访问 HTML 元素。
<3>用innerHTML 来获取或插入元素内容。
3.登录页面准备：
a.增加错误提示框。
b.写好HTML+CSS文件。
c.设置每个输入元素的id
4.定义JavaScript 函数。
a.验证用户名6-20位
b.验证密码6-20位
5.onclick调用这个函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Personal Website.</title>
<link href="../static/CSS1/js2.css" rel="stylesheet" type="text/css">
<script>
function myLogin() {
var oUname=document.getElementById("uname");
var oUpass=document.getElementById("upass");
var oError=document.getElementById("error_box")
if (oUname.value.length<6){
oError.innerHTML="用户名至少6位。"
}
else if (oUname.value.length>20){
oError.innerHTML="用户名不能超过20位。"
}
if (oUpass.value.length<6){
oError.innerHTML="密码至少6位。"
}
else if (oUpass.value.length>20){
oError.innerHTML="密码不能超过20位。"
}
}
</script> </head>
<body>
<div><h1><span style="font-size: 200px;color: darkmagenta;align:center">"代"</span>你飞!</h1></div> <div class="box">
<h2 align="center" style="font-size: 50px;font-family: 华文行楷;color: indigo">登录.注册</h2>
<div class="content1"> <div class="name" align="center" style="">
<img src="http://static.mengniang.org/common/thumb/c/c3/User_user.png/300px-User_user.png" width="30"><input id="uname" type="text" placeholder="用户名"><br> </div><br>
<div class="email" align="center">
<img src="http://cdn7.staztic.com/app/a/3215/3215272/password-generator-2000000-l-280x280.png"width="30"><input type="password" id="upass" placeholder="密码"> </div>
<br>
<input type="radio" name="role" value="stu"><font style="font-weight:bold; ">程序“猿”</font>
<input type="radio" name="role" value="teacher"><font style="font-weight:bold;">正常人</font>
<div class="remember-btn" align="center">
<input type="checkbox" value="true" checked="checked" name="session[remember_me]" id="session_remember_me"><span>记住我</span>
</div> <div id="error_box"><br></div>
<div class="input_box">
<input class="btn-a" value="登录" type="submit" onclick="myLogin()">
<span style="display: none" id="login_error_msg"></span>
</div>
<div class="controls bside" style="border: none">
<input value="1" name="remember" id="remember" type="checkbox">
<label for="remember">保存登录信息</label>
</div>
</div>
<div id="footer" style="background-color: transparent;clear:both;text-align:center;">版权 ． duym@jzx</div>
</div>
</div> <script>
document.getElementById("demo").innerHTML=Date();
document.write(Date())
</script> </body>
</html>
css代码：
body{
background-image:url(http://pic.58pic.com/58pic/11/54/86/32y58PICBe5.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
div.box{
margin-left:600px ;
border-style: groove;
margin-right: 600px;
text-align: center;
color: cornsilk;
border-radius: 150px;
padding: 10px;
border-width: 20px;
bottom: 100px;
}
.btn-a{
font-size: 30px;
font-family: 幼圆;
color: brown;
height:40px;
width: 200px;
border-radius: 5px;
background-color: cadetblue;
}
#error_box{
color: red;
}
h1{
color: chartreuse;
font-family: 华文隶书;
font-size: 100px;
text-align: center;
}
#uname{
border-radius: 10px;
}
#upass{
border-radius: 10px;
}
JavaScript 基础，登录验证的更多相关文章
- .Net Core 商城微服务项目系列（一）：使用IdentityServer4构建基础登录验证
这里第一次搭建,所以IdentityServer端比较简单,后期再进行完善. 1.新建API项目MI.Service.Identity,NuGet引用IdentityServer4,添加类InMemo ...
- JavaScript 基础，登录前端验证
<script></script>的三种用法: 放在<body>中 放在<head>中 放在外部JS文件 <!DOCTYPE html> & ...
- 用javascript实现简单的用户登录验证
用javascript实现简单的用户登录验证 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Ajax（简介、基础操作、计算器，登录验证）
Ajax简介 Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. ...
- Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制
Unit04: JavaScript 概述 . JavaScript 基础语法 . 流程控制 my.js function f3() { alert("唐胜伟"); } demo1 ...
- 基于Ajax与用户认证系统的登录验证
一.登录页面 from django.contrib import admin from django.urls import path from blog import views urlpatte ...
- javascript基础案例解析
学完了JavaScript基础部分,总结出一些基本案例,以备日后查看! 1.九九乘法口诀表:在控制台中输出九九乘法口诀表!代码如下: <!DOCTYPE html> <html> ...
- JavaScript基础，Cookies,Sessions
php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...
- ASP.NET MVC 登录验证
好久没写随笔了,这段时间没 什么事情,领导 一直没安排任务,索性 一直在研究代码,说实在的,这个登录都 搞得我云里雾里的,所以这次我可能也讲得不是 特别清楚,但是 我尽力把我知道的讲出来,顺便也对自 ...
- Shiro安全框架入门篇（登录验证实例详解与源码）
转载自http://blog.csdn.net/u013142781 一.Shiro框架简单介绍 Apache Shiro是Java的一个安全框架,旨在简化身份验证和授权.Shiro在JavaSE和J ...
随机推荐
- 20165336 实验一 Java开发环境的熟悉
20165336 实验一 Java开发环境的熟悉 一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:康志强 学号:20165336 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验 ...
- Java+selenium 如何下拉移动滚动条【实战】
一.场景:在编写脚本过程中需要定位的元素,在界面的底部,需要拖拽下拉滚动条,再进行定位元素. 实现思路:用Selenium 里面的 scrollTo 方法实现 二.脚本示例: 1. 用例设计 @The ...
- localstorage 和 sessionstorage 是什么？区别是什么？
localstorage 和 sessionstorage 一样都是用来存储客户端临时信息的对象,他们均只能存储字符串类型对象: localstorage生命周期是永久的,这意味着除非用户在浏览器提供 ...
- java定时任务的三种方式
/** * 普通thread * 这是最常见的,创建一个thread,然后让它在while循环里一直运行着, * 通过sleep方法来达到定时任务的效果.这样可以快速简单的实现,代码如下 */ ...
- HttpClient 链接管理
SOCK is a TCP/IP level proxy protocol, not HTTP. It is not supported by HttpClient out of the box. O ...
- python-面向对象-02_类和对象
类和对象 目标 类和对象的概念 类和对象的关系 类的设计 01. 类和对象的概念 类 和 对象 是 面向对象编程的 两个 核心概念 1.1 类 类 是对一群具有 相同 特征 或者 行为 的事物的一个统 ...
- vue脚手架搭建流程
搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...
- 记录关于vs2008 和vs2015 的报错问题
出现了 VS2008无法创建项目,无法打开项目的情况,提示这个注册表键值有问题 HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ MSBuild \ ToolsV ...
- 【剑指offer】二叉搜索树与双向链表
一.题目: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 二.思路: 对于一棵搜索二叉树来说,中序遍历得到的即是有序的结果,所以整 ...
- java中Long的比较
Long的比较要用equals而不要用== 当Long为常量且常量值小于一个字节(<=127)时,两个Long指向同一个常量内容: Long userId=127L; Long authorId ...