首頁 > 開發者 > JavaScript
H5使用者註冊表單頁 註冊模態框!，h5模態
本執行個體為大家分享了H5表單驗證新特性，如何使用者註冊表單頁，供大家參考，具體內容如下
<!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>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
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
