前端登录页验证-优快云博客

1、<script></script>的三种用法：
放在<body>中
放在<head>中
放在外部JS文件中

2、三种输出数据的方式：
使用 document.write() 方法将内容写到 HTML 文档中。
使用 window.alert() 弹出警告框。
使用 innerHTML 写入到 HTML 元素。
使用 "id" 属性来标识 HTML 元素。
使用 document.getElementById(id) 方法访问 HTML 元素。
用innerHTML 来获取或插入元素内容。

3、登录页面准备：
增加错误提示框。
写好HTML+CSS文件。
设置每个输入元素的id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="../static/css/10.24.1.css">
</head>
<body>
      <p id="hello">lalalala</p>
      <script>
          document.write("hello");
          document.getElementById("hello").innerHTML =Date();
      </script>
      <button type="button" onclick=window.alert("number")> press</button>
</body>
</html>

4、定义JavaScript 函数。
验证用户名6-20位
验证密码6-20位
5、onclick调用这个函数。

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

    <script>
        function mu() {
            var name=document.getElementById("username")
            var password=document.getElementById("password")
            var error=document.getElementById("error_box")
            if(name.value.length<6 ){
                error.innerHTML="用户名为6-20位"

            }
            if(password.value.length){
                 error.innerHTML="密码为6-20位"
            }
        }
    </script>

</head>
<body>
      <div class="box">
          <h2>登录</h2>

          <div class="input_box">
              <input  id="username" type="text" placeholder="请输入用户名">
          </div>

          <div class="input_box">
              <input  id="password" type="text" placeholder="请输入密码">
          </div>

          <div id="error_box"><br></div>
          <div>
              <button onclick="mu()">登录</button>
          </div>
      </div>
</body>
</html>