首頁 > 開發者 > JavaScript
標籤：輸入 超過 none pad cti 警告 get color document
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 來擷取或插入元素內容。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Demo</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>Demo</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>
3.登入頁面準備：
1.增加錯誤提示框。
2.寫好HTML+CSS檔案。
4.設定每個輸入元素的id定義JavaScript 函數。
1.驗證使用者名稱6-20位
2.驗證密碼6-20位
5.onclick調用這個函數。
<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><div class="bigbox"> <div class="box"> <h2>登入</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>
h2{ align:center; }.bigbox{ display: -webkit-flex; display: flex; width: 300px; height: 250px; padding-left: 100px; padding-top: 50px; background-color:cyan; }#input_box{ align:center; margin:500px; padding-left:500px; }#error_box{ color: hotpink; }body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; padding-bottom:40px; padding-top:40px; font-family:verdana,Arial,Helvetica,sans-serif; }
JavaScript 基礎，登入前端驗證
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
