JavaScript 基础，登录前端验证

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

三种输出数据的方式：

使用 document.write() 方法将内容写到 HTML 文档中。
使用 window.alert() 弹出警告框。

使用 innerHTML 写入到 HTML 元素。

使用 "id" 属性来标识 HTML 元素。
使用 document.getElementById(id) 方法访问 HTML 元素。

用innerHTML 来获取或插入元素内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户提示</title>
</head>
<body>
      <p>Hello！</p>
      <script>
          document.write(Date())
      </script>
  <button type="button" onclick=window.alert("用户名不得以数字开头")>LOGIM</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户提示</title>
</head>
<body>
      <p id="demo">Hello！</p>
      <script>
          document.getElementById("demo").innerHTML = Date();
      </script>
  <button type="button" onclick=window.alert("用户名不得以数字开头")>LOGIN</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" type="text/css" href="../aa/css/1.css">
</head>
<body><script>
        function myLogin() {
            var oUname = document.getElementById("umane");
            var oError = document.getElementById("error_box");
             var oUpass = document.getElementById("upass")

        if(oUname.value.length<6){
            oError.innerHTML="用户名至少为6位"
        }
        if(oUname.value.length>20){
            oError.innerHTML="用户名不得超过20位"
        }
        if(oUname.value.length>6&oUname.value.length<20&oUpass.value.length<6){
            oError.innerHTML="密码至少为6位"
        }
        if(oUname.value.length>6&oUname.value.length<20&oUpass.value.length>20){
            oError.innerHTML="密码不得超过20位"
        }
    }
    </script>
</head>
</body>>
<body>
<div class="bigbox">
      <div class="box">
          <h2 align="center">登录</h2>

       <div class="input_box">
           账户：<input id="umane"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="myLogin()">登录</button>
               <button onclick=window.alert("是否取消登录？")>取消</button></div>
          </div>
               </div>

</body>
</html>

posted @ 2017-10-27 11:04 070王学竞阅读(160) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

JavaScript 基础，登录前端验证

公告