zoukankan html css js c++ java

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 rel="stylesheet" type="text/css" href="/static/css/cc.css">
    <script>
        function foLogin() {
            var oUname = document.getElementById("uname");
            var oError = document.getElementById("error_box");
            var oUpass = document.getElementById("upass");
            var isoError = true;
            oError.innerHTML = "<br>";
            if (oUname.value.length < 6 || oUname.value.length > 20) {
                oError.innerHTML = "用户名要6-20位";
                isoError = false;
                return;
            }
            if (oUpass.value.length < 6 || oUpass.value.length > 20) {
                oError.innerHTML = "密码要6-20位";
                isoError = false;
                return;
            }
        }
    </script>
</head>
<body>
<div><h2>登录</h2></div>
<div class="box">
    <div class="input_box">
        <input id="uname" type="text" placeholder="请输入用户名">
    </div>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码">
    </div>
    <div id="error_box"><br></div>
    <div class="input_box">
        <button onclick="foLogin()">登录</button>
    </div>
</div>
</body>
</html>

h2 {
    align: center;
    padding-right: 0;
    padding-left: 0;
    font-weight: bold;
    font-size: 15px;
    padding-bottom: 15px;
    margin: 0;
    color: blue;
    padding-top: 0;
}

div.box {
    padding-right: 500px;
    margin-top: 100px;
    padding-left: 500px;
    font-size: 16px;
    padding-bottom: 40px;
    color: black;
    padding-top: 40px;
    font-family: verdana, Arial, Helvetica, sans-serif;
}
div.input_box{
    align:center;
    margin:550px;
    padding-left:550px;
    color:cornflowerblue;
    }

div.box{
    padding-right:500px;
    margin-top:100px;
    padding-left:500px;
    font-size:16px;
    padding-bottom:40px;
    color:cornflowerblue;
    padding-top:40px;
    font-family:verdana,Arial,Helvetica,sans-serif;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsDemo</title>
</head>
<body>
<p id="demo">ddd</p>

<script>
   document.getElementById("demo").innerHTML = Date();
</script>
<script>
    document.write(Date());
</script>
<button type="button" onclick=windows.alert("number")>press</button>
</body>
</html>

查看全文

相关阅读:
dwz tabs table实现翻页及各tabs查询
 DruidDataSource配置
 利用blob对象实现大文件分片上传
 HTML5 File API 全介绍
 JS获取当前网页内容，创建文件并下载，URL.createObjectURL和URL.revokeObjectURL
使用 CSS 接收用户的点击事情并对相关节点进行操作
 Flex布局
 background: inherit制作倒影、单行居中两行居左超过两行省略
 层叠顺序与堆栈上下文、font-family字体定义顺序的
 简单使用GA监控网站浏览行为

原文地址：https://www.cnblogs.com/xiaojiaqi/p/7726196.html