html 編寫使用者註冊介面
阿新 • • 發佈：2018-11-09
編寫使用者註冊介面(友好型並通過js校驗資訊是否合法)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function showUserTip() { // 1. 獲取標籤物件; document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">使用者名稱不能為空</b>'; } function showPwdTip() { // 1. 獲取標籤物件; document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密碼必須大於6位</b>'; } function checkUser() { //1. 離焦時判斷使用者名稱是否為空? var name = document.getElementById('user').value; // 2. 如果為空， 右邊來一個紅色的提示; // 3. 如果不為空， 則取消所有提示; if (name === ''){ document.getElementById('userTip').innerHTML = '<b style="color: #f10180">使用者名稱不能為空</b>' return false; }else{ document.getElementById('userTip').innerHTML = '<b style="color: green"> ok </b>' return true; } } function checkPwd() { // alert('離焦'); //1. 離焦時判斷使用者名稱是否為空? var pwdLen = document.getElementById('pwd').value.length; // 2. 如果為空， 右邊來一個紅色的提示; // 3. 如果不為空， 則取消所有提示; if (pwdLen < 6){ document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密碼必須大於6位</b>' return false; }else{ document.getElementById('pwdTip').innerHTML = '<b style="color: green"> ok </b>' return true; } } </script> <style> #login { width: 360px; height: 360px; /*border: 1px solid red;*/ text-align: left; margin-left: 420px; margin-right: 60px; margin-top: 60px; background: snow; border: 1px; } #login2 { text-align: left; margin-left: 35px; margin-right: 30px; margin-top: 60px; background: snow; } </style> </head> <body> <div id="login" > <h1 style="text-align: center;color: #f10180">使用者註冊</h1> <hr> <div id="login2"> <form action="#" method="get"> <input type="text" id='user' placeholder="輸入使用者名稱" name="username" onfocus="showUserTip()" onblur="checkUser()"> <span id="userTip"></span><br/><br> <input type="password" id="pwd" placeholder="輸入密碼" name="passwd" onfocus="showPwdTip()" onblur="checkPwd()"> <span id="pwdTip"></span><br/><br> <input type="submit" value="註冊"> </form> </div> </div> </body> </html>
