標籤:訪問 container err win 驗證使用者名稱 highlight 著作權 登入介面 rip
- <script></script>的三種用法:
- 放在<body>中
- 放在<head>中
- 放在外部JS檔案中
- 三種輸出資料的方式:
- 使用 document.write() 方法將內容寫到 HTML 文檔中。
- 使用 window.alert() 彈出警告框。
- 使用 innerHTML 寫入到 HTML 元素。
- 使用 "id" 屬性來標識 HTML 元素。
- 使用 document.getElementById(id) 方法訪問 HTML 元素。
- 用innerHTML 來擷取或插入元素內容。
- 登入頁面準備:
- 增加錯誤提示框。
- 寫好HTML+CSS檔案。
- 設定每個輸入元素的id
- 定義JavaScript 函數。
- 驗證使用者名稱6-20位
- 驗證密碼6-20位
- onclick調用這個函數。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>歡迎來到登入介面,請登入</title> <script type="text/javascript" src="sdda.js"></script> <link rel="stylesheet" href="sdf.css"></head><body><p id="meto">中國標準時間</p><script>document.getElementById("meto").innerHTML = Date()</script><div id="container" style="width: 300px" align="center"> <div id="header" style="background-color: yellow"><h2 align="center">登陸介面</h2></div> <div id="content" style="background-color: aqua"> <p align="center">使用者名稱:<input id="uname" type="text" name="user" placeholder="請輸入帳號"> </p> <p align="center"> 密碼 :<input id="upass" type="password" name="psw" placeholder="請輸入密碼"></p> <br> <div id="error_box"><br> </div> <input type="radio" value="stu">使用者 <input type="radio" value="tea">會員 <br> <input type="checkbox" value="true">記住密碼 <a href="">登陸遇到問題</a><br> <button onclick="fnLogin()">登陸</button>     <input type="button" name="regist" value="註冊"> </div> <div id="footer" style="background-color: crimson"><h3 align="center">著作權@hir</h3></div></div></body></html>
function fnLogin() { var oUname = document.getElementById("uname") var oUpass = document.getElementById("upass") var oError = document.getElementById("error_box") if (oUname.value.length > 20 || oUname.value.length < 6) { oError.innerHTML = "使用者名稱為6-20位字元" } if (oUpass.value.length > 20 || oUpass.value.length < 6) { oError.innerHTML = "密碼為 6-20位字元" }}
JavaScript 基礎,登入驗證