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. python中dict的fromkeys用法

    fromkeys是创造一个新的字典.就是事先造好一个空字典和一个列表,fromkeys会接收两个参数,第一个参数为从外部传入的可迭代对象,会将循环取出元素作为字典的key值,另外一个参数是字典的val ...

  2. Qt网络模块如何使用（表格）

    1.网络模块介绍 类名 说明 中文 QAbstractNetworkCache The interface for cache implementations 缓存实现的接口 QNetworkCach ...

  3. POJ1845 sumdiv 数论

    正解:小学数学数论 解题报告: 传送门! 其实不难但我数学这个方面太菜了所以还是多写点儿博客趴QAQ 然后因为是英文的所以先翻译一下,,,? 大概就是说求AB的所有约数之和,对9901取膜 这个只需要 ...

  4. Swift中＂#＂的用法

    配置外部参数名 在函数(或者方法)的参数名前添加"#",可以使该参数拥有相同的本地参数名和外部参数名. 注:在方法中,第二个及后续的参数,默认是具有和内部参数一致的外部参数名的,只 ...

  5. session操作类

    using System;using System.Web; /// <summary> ///session操作类 /// </summary> public class a ...

  6. oracle中in和exists的区别

    IN适合于外表大而内表小的情况:EXISTS适合于外表小而内表大的情况. 性能上的比较 比如Select * from T1 where x in ( select y from T2 ) 执行的过程 ...

  7. MyBatis的生命周期

    MyBatis的生命周期 所谓的生命周期就是第一个对象应该存活的时间,比如一些对象一次用完后就要关闭,使它们被Java虚拟机(JVM)销毁,以避免继续占用资源,所以我们会根据每一个组件的作用去确定其生 ...

  8. 关于Oxygen版 Eclipse JSP或html 中<option>标签嵌入jstl 如<c:if>出现报错

    Oxygen版 Eclipse JSP或html 中<option>标签嵌入jstl 如<c:if>出现报错 好好的学框架的整合,结果在<option>中加入< ...

  9. javax.lang.model Implementation Backed by Core Reflection

    javax.lang.model Implementation Backed by Core Reflection 1.javax.lang.model: How do I get the type ...

  10. 006-docker-安装-nginx

    1.搜索镜像 docker search nginx 2.拉取合适镜像 docker pull nginx docker images 3.使用镜像 docker run -p 8080:80 --n ...