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 ...
随机推荐
- STLの应用
QAQ因为绝望地发现好像这些应用都没有题目...所以就专门开了个随笔存题面qwq 谁的孙子最多 给定一棵树,其中1号节点是根节点,问哪一个节点的孙子节点最多,有多少个.(孙子节点,就是儿子节点的儿子节 ...
- 【pyqtgraph绘图】案例-动态的正余弦波形图
先看一个简单的小例子: 完整代码: import numpy as np import pyqtgraph as pg import sys from PyQt5.QtWidgets import Q ...
- 【pyqtgraph绘图】Qt速成课程
解读官方API-Qt速成课程 参考:http://www.pyqtgraph.org/documentation/qtcrashcourse.html Qt速成课程 PyQtGraph广泛使用Qt来生 ...
- 那些年读过的书《Java并发编程实战》二、如何设计线程安全类
1.设计线程安全类的过程 设计线程安全类的过程就是设计对象状态并发访问下线程间的协同机制(在不破坏对象状态变量的不变性条件的前提下). (1)构建线程安全类的三个基本要素: 1)找出构成对象状态的所有 ...
- mysqldump备份数据出错
收到nagios报警,提示mysql备份失败,线上使用的是逻辑备份,也就是使用mysqldump,由于数据比较小,也就没在乎速度神马的问题.好吧,那就查查是什么原因导致备份失败,由于备份是写成脚本定时 ...
- SQL SERVER BCP的用法
转自:https://www.cnblogs.com/fishparadise/p/4809014.html 前言 SQL SERVER提供多种不同的数据导出导入的工具,也可以编写SQL脚本,使用存储 ...
- host文件
# Copyright (c) 1993-2009 Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP f ...
- 关于获取路径path
String webPath = request.getServletPath(); log.info(webPath); 输出: /zjdlbb/zjdlbb/zjdlbb/test.ht log. ...
- vue-3.0创建项目
.npm install --global @vue/cli .npm install -g @vue/cli-init .vue init webpack my-project
- golang 中创建daemon的方法
https://github.com/takama/daemon https://github.com/immortal/immortal/blob/master/fork.go ...