十七、JavaScript 基礎，登錄前端驗證
阿新 • • 發佈：2017-10-27
寫到 span 文件中 lin clas .get 至少 css 使用
1.<script></script>的三種用法：
- 放在<body>中
- 放在<head>中
- 放在外部JS文件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascpit</title> <script> function displayDate() { document.getElementById(
"demo").innerHTML=Date(); } </script> <script src="mp.js"></script> </head> <body> <p id="demo">666</p> <script> document.write(Date()); document.getElementById("demo").innerHTML=Date(); function myFuntion() { document.getElementById("demo").innerHTML="Hello!"; } </script> <button type="button" onclick="myFuntion()">press</button> </body> </html>運行結果如圖：
2.三種輸出數據的方式：
- 使用 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>Login</title> </head> <body> <p>Hey,homie</p> <script> document.write(Date()) </script> <button type="button" onclick=window.alert("用戶名不能以數字開頭")>Login</button> </body> </html>
運行結果如圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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>
3.登錄頁面準備：
- 增加錯誤提示框。
- 寫好HTML+CSS文件。
- 設置每個輸入元素的id
4.定義JavaScript 函數。
- 驗證用戶名6-20位
- 驗證密碼6-20位
5.onclick調用這個函數。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登錄</title> <link herf="../static/css/js23.css" rel="stylesh" rel="stylesheet" type="text/css"> <script> function myLogin(){ var myUname = document.getElementById("uname"); var myError = document.getElementById("error_box"); if(myUname.value.length<6){ myError.innerHTML = "用戶名至少6位！" } } </script> </head> <body> <div class="box" > <h2>登錄</h2> <div class="input_box"> <input id="myUname" type="text" placeholder="請輸入用戶名"> </div> <div class="input_box"> <input id="myUpassword" type="password" placeholder="請輸入密碼"> </div> <div id="error_box"><br></div> <div class="input_box"> <button>登錄</button> </div> </div> </body> </html>
十七、JavaScript 基礎，登錄前端驗證