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. # 20165225 《Java程序设计》第一周学习总结

    20165225 <Java程序设计>第一周学习总结 1.视频与课本中的学习: 首先是为了运行和开发Java分别安装了JRE和JDK,具体做法在老师给的<Java2 实用教程(第五版 ...

  2. linux export source

  3. MongoDB 用户管理

    创建管理员账户: 1.登录 [root@MongoDB ~]# mongo 2.切换到admin数据库创建账户 > use admin switched to db admin 3.用户创建用户 ...

  4. MongoDB 查询$关键字 $in $or $all

    属于:$in 满足其中一个元素的数据把age=13,73 的数据显示 > db.user.find({age: { $in:[13,73]}}) { "_id" : Obje ...

  5. chkdsk 命令对Raid盘检测和查错、修复

    C:\Documents and Settings\Administrator>chkdsk /?检查磁盘并显示状态报告. CHKDSK [volume[[path]filename]]] [/ ...

  6. 万恶之源 - Python模块二

    shelve 我们之前学了json和pickle模块 这些都是序列化的模块,咱们进行在讲一个序列化的东西 叫做shelve 你们肯定有个疑问,这个东西和那个类似为什么要讲.是因为这个模块比较简单的,并 ...

  7. javaScript 数组迭代方法

    map 方法 解释:map即映射,返回对每项操作后组成的新数组 let arr=[1,2,3,4,5,6,7,8]; let newArr=arr.map((item)=>{ if(item&g ...

  8. 2018-2019-1 20189221 《Linux内核原理与分析》第七周作业

    2018-2019-1 20189221 <Linux内核原理与分析>第七周作业 实验六 分析Linux内核创建一个新进程的过程 代码分析 task_struct: struct task ...

  9. mysql数据库字段类型详解

    MySQL支持大量的列类型,它可以被分为3类:数字类型.日期和时间类型以及字符串(字符)类型.本节首先给出可用类型的一个概述,并且总结每个列类型的存储需求,然后提供每个类中的类型性质的更详细的描述. ...

  10. Git push remote rejected {change ### closed}

    是因为和关掉的提交对应的Change_id一样导致的. 另一种可能是cherry-pick导致的: 之前提交的时候因为有merge,所以在gerrit服务器上审核的时候,我给abandoned了,因此 ...