zoukankan html css js c++ java

作业17——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 来获取或插入元素内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p id="demo">abcccc</p>
    <script>
        document.write(Date()).innerHTML = aaaaaaaaa;
        document.getElementById("demo").innerHTML = 123456789;
    </script>
    <button type="button" onclick=window.alert("number")>press</button>

</body>
</html>

登录页面准备：
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" href="style.css" type="text/css">
    <script>
        function fnLogin() {
            var oUname = document.getElementById("uname")
            var oError = document.getElementById("error_box")
            var oUword = document.getElementById("uword")

            if(oUname.value.length<6){
                oError.innerHTML = "用户名至少4位"
            }
            if(oUname.value.length==0){
                oError.innerHTML = "请输入用户名"
            }
            if(oUname.value.length>12){
                oError.innerHTML = "用户名至多13位"
            }
            if(oUword.value.length==0){
                oError.innerHTML = "请输入密码"
            }
            if(oUword.value.length<6){
                oError.innerHTML = "密码至少6位"
            }
            if(oUword.value.length>20){
                oError.innerHTML = "密码至多20位"
            }
        }
    </script>
</head>
<body style="background-color: aliceblue">
    <div class="box" >
        <h2 class="denglu">登录</h2>
        <div class="input_box">
            <input id="uname" type="text" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            <input id="uword" type="password" placeholder="请输入密码">
        </div>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">登录</button>
        </div>
    </div>


</body>
</html>

    .box{
        border: 1px solid #cccccc;
        width: 334px;
        margin: 5px;
        text-align: center;
    }
    .denglu{
        background-color: cornflowerblue;
        font-family: 华文楷体;
        font-size: 35px;
    }
    .input_box{
       height: 40px;
    }

查看全文

相关阅读:
day01_02.php的开发环境准备
 day01_01.了解php
day05_01 鸡汤+内容回顾
 河北省科技信息通用调查系统需求-----------开发日志---第一天
 开发项目注意事项总结
 JavaScript学习心得
 掌握需求过程读后感
 自我检讨
 安卓开发使用get请求想服务器发送数据
 对安卓移动应用开发的学习

原文地址：https://www.cnblogs.com/888abc/p/7732497.html