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 基础，登录验证的更多相关文章

  1. .Net Core 商城微服务项目系列（一）：使用IdentityServer4构建基础登录验证

    这里第一次搭建,所以IdentityServer端比较简单,后期再进行完善. 1.新建API项目MI.Service.Identity,NuGet引用IdentityServer4,添加类InMemo ...

  2. JavaScript 基础，登录前端验证

    <script></script>的三种用法: 放在<body>中 放在<head>中 放在外部JS文件 <!DOCTYPE html> & ...

  3. 用javascript实现简单的用户登录验证

    用javascript实现简单的用户登录验证 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. Ajax（简介、基础操作、计算器，登录验证）

    Ajax简介 Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. ...

  5. Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制

    Unit04: JavaScript 概述 . JavaScript 基础语法 . 流程控制 my.js function f3() { alert("唐胜伟"); } demo1 ...

  6. 基于Ajax与用户认证系统的登录验证

    一.登录页面 from django.contrib import admin from django.urls import path from blog import views urlpatte ...

  7. javascript基础案例解析

    学完了JavaScript基础部分,总结出一些基本案例,以备日后查看! 1.九九乘法口诀表:在控制台中输出九九乘法口诀表!代码如下: <!DOCTYPE html> <html> ...

  8. JavaScript基础，Cookies,Sessions

    php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...

  9. ASP.NET MVC 登录验证

     好久没写随笔了,这段时间没 什么事情,领导 一直没安排任务,索性 一直在研究代码,说实在的,这个登录都 搞得我云里雾里的,所以这次我可能也讲得不是 特别清楚,但是 我尽力把我知道的讲出来,顺便也对自 ...

  10. Shiro安全框架入门篇（登录验证实例详解与源码）

    转载自http://blog.csdn.net/u013142781 一.Shiro框架简单介绍 Apache Shiro是Java的一个安全框架,旨在简化身份验证和授权.Shiro在JavaSE和J ...

随机推荐

  1. monitor

    // ==UserScript== // @name Page Monitor // @namespace http://tampermonkey.net/ // @version 0.1 // @d ...

  2. JdbcTemplate中向in语句传参

    spring jdbc包提供了JdbcTemplate和它的两个兄弟SimpleJdbcTemplate和NamedParameterJdbcTemplate,我们先从JdbcTemplate入手, ...

  3. 什么是ELK

    为什么用到ELK: 一般我们需要进行日志分析场景:直接在日志文件中 grep.awk 就可以获得自己想要的信息.但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如何归档.文本搜索太慢怎么办 ...

  4. 10.3-uC/OS-III内部任务管理（TCB）

    任务控制块 TCB 1.任务控制块是被uC/OS-III用于维护任务的一个结构体.每个任务都必须有自己的 TCB. uC/OS-III 在 RAM 中分配 TCB.当调用uC/OS-III提供的与任务 ...

  5. django基础-01：软件框架，MVC框架，MVT

    1. 软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模块都有特定的功能,模 ...

  6. python序列元素引用容易出错的地方

    python序列分列表和元组,不同之处在于元组的元素不能修改.元组使用小括号,列表使用方括号.元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可.举个简单的例子,a1是一个元组,a2是一个列表 ...

  7. Laravel删除产品-CRUD之delete(destroy)

    上一篇讲了Laravel编辑产品-CRUD之edit和update,现在我们讲一下删除产品,方法和前面的几篇文章类似,照着ytkah来操作吧 1,controller的function destroy ...

  8. 前端框架之Vue(4)-Class与Style绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将  ...

  9. 模拟django配置环境进行数据增删改查，测试的时候有用

    import os if __name__ == '__main__': os.environ.setdefault('DJANGO_SETTINGS_MODULE','day76.settings' ...

  10. 继承：继承后子类构造函数具有隐式super,所以子类中所以的构造函数默认会访问父类中的空参数的构造函数

    class Test { Test(){ System.out.println("Test"); } Test(String name){ System.out.println(& ...