<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>用戶注冊表單頁</title> <style> #form_content{ width:600px; margin:0 auto; position:absolute; left:400px; } #form_content .dc{ width:600px; margin-top:10px; overflow:hidden; } #form_content .dc h3{ text-align:center; } #form_content b{ display:inline-block; height:40px; line-height: 40px; margin-left:20px; } #form_content input{ display:inline-block; height:34px; width:200px; border-radius:2px; margin-left:60px; padding-left:10px; } .pc{ width:200px; height:40px; float:right; line-height:40px; text-align:center; margin:0 20px 0; background:#333; color:#fff; font-weight:bold; border-radius:8px; display:none; } input#sub{ display:inline-block; width:215px; background:#f0f; margin-left:144px; } .show_pass{ background:limegreen; display:block; } .show_warn{ background:#e4393c; display:block; } #audio_bground{ width:100%; height:100%; background:#afa; position:absolute; z-index:-10; } </style> </head> <body> <!--input 標簽新特性--> <form> <!--email屬性--> 郵箱類型<input type="email"/><br/> <!--tel屬性--> 電話類型<input type="tel"/><br/> <!--number屬性--> 數字類型<input type="number"/><br/> <!--date屬性--> 日期類型<input type="date"/><br/> <!--month屬性--> 月份類型<input type="month"/><br/> <!--week屬性--> 周期類型<input type="week"/><br/> <!--range屬性--> 數字范圍<input type="range" min="18" max="60"/><br/> <!--search屬性--> 搜素類型<input type="search"/><br/> <!--color屬性--> 顏色選擇器<input type="color"/><br/> <!--url屬性--> 網址類型<input type="url"/><br/> <input type='submit'/> </form> <hr/> <div id="form_content"> <form action=""> <div class="dc"><h3>用戶注冊頁面</h3></div> <div class="dc"><b>用戶昵稱</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">請輸入用戶名</p></div> <div class="dc"><b>用戶密碼</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">請輸入密碼</p></div> <div class="dc"><b>個人郵箱</b><input id="email" type="email" required/><p class="pc">清輸入郵箱</p></div> <div class="dc"><b>個人主頁</b><input id="url" type="url" required/><p class="pc">請輸入個人主頁(可不填)</p></div> <div class="dc"><b>聯系電話</b><input id="tel" type="tel" required/><p class="pc">請輸入聯系電話</p></div> <div class="dc"><b>你的年齡</b><input id="age" type="number" min="18" max="60" required/><p class="pc">請輸入你的年齡</p></div> <div class="dc"><b>出生日期</b><input id="date" type="date" required/><p class="pc">請選擇出生日期</p></div> <div class="dc"><input id="sub" type="submit" value="提交注冊"/></div> </form> </div> <script> var uname=document.getElementById('user'); uname.onfocus=function(){ this.nextElementSibling.style.display='block'; this.nextElementSibling.innerHTML='8-12數字或字母組成'; } uname.onblur=function(){ if(this.validity.valid){ this.nextElementSibling.className='pc show_pass'; this.nextElementSibling.innerHTML='用戶名格式正確'; } else if(this.validity.valueMissing) { this.nextElementSibling.className = 'pc show_warn'; this.nextElementSibling.innerHTML = '用戶名不能為空'; }else if(this.validity.patternMismatch){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='用戶名格式非法'; } } var upwd=document.getElementById('pwd'); upwd.onfocus=function(){ this.nextElementSibling.style.display='block'; this.nextElementSibling.innerHTML='6-12位數字/字母/英文符號組成'; } upwd.onblur=function(){ if(this.validity.valid){ this.nextElementSibling.className='pc show_pass'; this.nextElementSibling.innerHTML='密碼格式正確'; }else if(this.validity.valueMissing){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='用戶密碼不能為空'; }else if(this.validity.patternMismatch){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='密碼格式非法'; } } var e_mail=document.getElementById('email'); e_mail.onfocus=function(){ this.nextElementSibling.style.display='block'; this.nextElementSibling.innerHTML='請輸入你的常用郵箱'; } e_mail.onblur=function(){ if(this.validity.valid) { this.nextElementSibling.className = 'pc show_pass'; this.nextElementSibling.innerHTML = '郵箱格式正確'; }else if(this.validity.valueMissing){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='郵箱不能為空'; }else if(this.validity.typeMismatch){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='郵箱格式有誤'; } } var url=document.getElementById('url'); url.onfocus=function(){ this.nextElementSibling.style.display='block'; this.nextElementSibling.innerHTML='請輸入你的個人主頁(選填)'; } url.onblur=function(){ if(this.validity.valid) { this.nextElementSibling.className = 'pc show_pass'; this.nextElementSibling.innerHTML = '網址格式正確'; }else if(this.validity.typeMismatch){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='網址格式非法'; } } var uphone=document.getElementById('tel'); uphone.onfocus=function(){ this.nextElementSibling.style.display='block'; this.nextElementSibling.innerHTML='請輸入你的聯系電話'; } uphone.onblur=function(){ if(this.validity.valid){ this.nextElementSibling.className='pc show_pass'; this.nextElementSibling.innerHTML='電話號碼格式正確'; }else if(this.validity.valueMissing){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='電話號碼不能外空'; }else if(this.validity.typeMismatch){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='電話號碼格式非法'; } } var uage=document.getElementById('age'); uage.onfocus=function(){ this.nextElementSibling.style.diplay='block'; this.nextElementSibling.innerHTML='請輸入你的年齡'; } uage.onblur=function(){ if(this.validity.valid){ this.nextElementSibling.className='pc show_pass'; this.nextElementSibling.innerHTML='你的年齡符合注冊要求'; }else if(this.validity.rangeOverflow){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='你的年齡大於注冊范圍'; }else if(this.validity.rangeUnderflow){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='你的年齡小於注冊范圍' }else if(this.validity.valueMissing){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='年齡不能為空'; } } var udate=document.getElementById('date'); udate.onfocus=function(){ this.nextElementSibling.style.display='block'; this.nextElementSibling.innerHTML='請輸入你的出生日期'; } udate.onblur=function(){ if(this.validity.valueMissing){ this.nextElementSibling.className='pc show_warn'; this.nextElementSibling.innerHTML='出生日期不能為空'; }else if(this.validity.valid){ this.nextElementSibling.className='pc show_pass'; this.nextElementSibling.innerHTML='已選擇出生日期'; } } </script> </body> </html>