JavaScript 基礎，登錄驗證

1. <script></script>的三種用法：
  1. 放在<body>中
  2. 放在<head>中
  3. 放在外部JS文件中
2. 三種輸出數據的方式：
  1. 使用 document.write() 方法將內容寫到 HTML 文檔中。
  2. 使用 window.alert() 彈出警告框。
  3. 使用 innerHTML 寫入到 HTML 元素。
    1. 使用 "id" 屬性來標識 HTML 元素。
    2. 使用 document.getElementById(id) 方法訪問 HTML 元素。
    3. 用innerHTML 來獲取或插入元素內容。
3. 登錄頁面準備：
  1. 增加錯誤提示框。
  2. 寫好HTML+CSS文件。
  3. 設置每個輸入元素的id
4. 定義JavaScript 函數。
  1. 驗證用戶名6-20位
  2. 驗證密碼6-20位
5. onclick調用這個函數。

 1 .box {
 2     border: 1px solid #cccccc;
 3     position: absolute;
 4     top: 25px;
 5     left: 40px;
 6     float: left;
 7     height: 300px;
 8     width: 400px;
 9 }
10 
11 h2 {
12     font-family: 華文楷體;
13     font-size: 28px;
14     text-align: center;
15     background: #cccccc;
16     margin-top: auto;
17     height: 40px;
18     width: 400px;
19 }
20 .input_box {
21     height: 60px;
22     width: 80px;
23     margin-left: 10%;
24 }
25 
26 input {
27     align-self: center;
28     height: 30px;
29     width: 280px;
30 
31 }
32 
33 button {
34     align-content: center;
35     font-family: 華文楷體;
36     font-size: 28px;
37     text-align: center;
38     background: #cccccc;
39     height: 40px;
40     width: 300px;
41 }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>登錄</title>
 6     <link href="../static/css/1.css" rel="stylesheet" type="text/css">
 7 
 8     <script>
 9         function fnLogin() {
10             var oUname = document.getElementById("uname")
11             var oError = document.getElementById("error_box")
12             var oPassward = document.getElementById("upass")
13             if (oUname.value.length<6){
14                 oError.innerHTML = "用戶名至少6位"
15             }
16             if(oUname.value.length>6&oPassward.value.length<6){
17             oError.innerHTML="密碼至少為6位"
18         }
19         }
20     </script>
21 </head>
22 <body>
23     <div class="box">
24         <h2>登錄</h2>
25 
26         <div class="input_box">
27             <input type="text" id="uname" placeholder="請輸入用戶名">
28         </div>
29         <div class="input_box">
30             <input type="password" id="upass" placeholder="請輸入密碼">
31         </div>
32         <div id="error_box"><br></div>
33         <div class="input_box">
34             <button onclick="fnLogin()">登錄</button>
35         </div>
36 
37     </div>
38 </body>
39 </html>

轉載于:https://www.cnblogs.com/l-j-l/p/7732454.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/391003.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/391003.shtml
英文地址，請注明出處：http://en.pswp.cn/news/391003.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！