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 ...

随机推荐

java 选择排序、冒泡排序、折半查找
public class SortAndSelectDemo{ public static void main(String[] args){ int[] arr = {3, 5, 17, 2, 11 ...
MTU 和 MSS 关系、 IP分片、TCP分段
从四层模型:链路层,网络层,传输层,应用层说一 .以太网V2格式数据帧 : 链路层 Destination Source Type DataAndPad FCS 6 ...
如何修改帝国cms文章点击量默认值和成倍增加
我们在帝国cms发布完文章,在不点击的情况下,“点击量”默认显示为0,请问有什么方法,修改关注默认值吗?这个可以在增加信息时,“特殊属性”标签里修改点击量,如下图有朋友问有没其他好的方法快速增加.成 ...
UIKIT_EXTERN和define定义常量
看过我其他的博客的人都知道,我喜欢用define定义常量,最近看了一个开源的轮子,使用UIKIT_EXTERN这个定义的常量,了解了一下,发现使用宏定义的常量会在内存中临时开辟一份内存空间,而使用UI ...
VueI18n的应用
.npm install vue-i18n .在 main.js 中引入 vue-i18n import VueI18n from 'vue-i18n' Vue.use(VueI18n) .在main ...
python-->(set /dict)交集差集并集补集(功能用来做交差并补的)
# ### 集合作用:交集差集并集补集(功能用来做交差并补的) '''特征:自动去重无序''' #定义一个空集合 setvar = set() #set()强制转换成一个空集合的数据类型 p ...
PHP中parent、this、self和static的区别
参考: http://www.cnblogs.com/devcjq/articles/2424738.html http://www.cnblogs.com/alsf/p/9621002.html h ...
Py中的矩阵乘法【转载】
转自:https://blog.csdn.net/cqk0100/article/details/76221749 1.总结对于array对象,*和np.multiply函数代表的是数量积,如果希望 ...
wue父子通信和动态路由还有点击事件直接赋值传参数
这种直接在后面赋值传值
crontab-rsync
写一个shell脚本放到crontab中,该脚本利用rsync把远程同步到本地的话,需要把本地的公钥放到远程的authorized_keys:否则,手动执行脚本没问题,但是crontab执行就不会有效 ...

JavaScript 基础，登录验证

JavaScript 基础，登录验证的更多相关文章

随机推荐

热门专题