JavaScript 基础，登录验证

<script></script>的三种用法：
1. 放在<body>中
2. 放在<head>中
3. 放在外部JS文件中
三种输出数据的方式：
1. 使用 document.write() 方法将内容写到 HTML 文档中。
2. 使用 window.alert() 弹出警告框。
3. 使用 innerHTML 写入到 HTML 元素。
  1. 使用 "id" 属性来标识 HTML 元素。
  2. 使用 document.getElementById(id) 方法访问 HTML 元素。
  3. 用innerHTML 来获取或插入元素内容。
登录页面准备：
1. 增加错误提示框。
2. 写好HTML+CSS文件。
3. 设置每个输入元素的id
定义JavaScript 函数。
1. 验证用户名6-20位
2. 验证密码6-20位

onclick调用这个函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="../static/css/load.css" rel="stylesheet" type="text/css">

    <script>
    function fnLogin() {
        var oUname = document.getElementById("uname")
        var oError = document.getElementById("error_box")
        var opassward = document.getElementById("upass")

        if(oUname.value.length<6){
            oError.innerHTML="用户名至少为6位"
        }
         if(oUname.value.length>6&opassward.value.length<6){
            oError.innerHTML="密码至少为6位"
        }

    }


    </script>

</head>
<body>
  <div><h1>打开代码的世界</h1></div>
  <div class="aa"><script>document.write("loading....")</script>
    </div>

<div class="flex-container">

    <div class="box">
        <p id="we">aaa</p>
        <script>
  document.getElementById("we").innerHTML=Date();
  <!--代替id=we的内容-->

        </script>

        <div class="input_box">
            登录　<input id="uname" type="text" placeholder="write down your name">
        </div>
        <br>
        <div class="input_box">
            密码　<input id="upass" type="password" placeholder="write down your PIN">
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">load</button>
            <button type="button" onclick=window.alert("账号密码为空，请输入！")>未输入账号密码</button>
        </div>
        <br>
    </div>
</div>
</body>
</html>
<style>

</style>

h1{
    align:center;
    padding-right: 0;
    padding-left: 0;
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 15px;
    margin: 0;
    color: #904;
    padding-top: 0;}
    body{
    padding-right:500px;
    margin-top:100px;
    padding-left:500px;
    font-size:16px;
    background:#000;
    padding-bottom:40px;
    color:black;
    padding-top:40px;
    font-family:verdana,Arial,Helvetica,sans-serif;
    }
form {
    display: block;
    margin-top: 0em;}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    padding-left:100px;
    padding-top:40px;
    background-color:pink;
aa{
color:pink}
}
input_box{
    align:center;
    margin:550px;
    padding-left:550px;
    color:red;
    }

    body{
    padding-right:500px;
    margin-top:100px;
    padding-left:500px;
    font-size:16px;
    background:#000;
    padding-bottom:40px;
    color:red;
    padding-top:40px;
    font-family:verdana,Arial,Helvetica,sans-serif;
    }

<script>
  document.write(Welcome to loading.....)
</script>

相关阅读:
Win10 安装GNU 编译器（gcc、g++ 和 gfortran）
三维地图制作数据选型相关参考资料
 借助mapshaper的简化来修复geojson的拓扑错误
 一种改进后的turf.idw算法
 基于Geojson的点集的抽稀Js实现
 OL3-Cesium 二三维鼠标事件统一处理
 About TopoJSON
基于 geojson数据类型面转线Transforms Polygons and MultiPolygons to LineStrings.
数据库文档编写辅助脚本
 Extensible Messaging and Presence Protocol (XMPP): Core
原文地址：https://www.cnblogs.com/YyYyYy11/p/7723372.html