首页 > 代码库 > 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>
H5——表单验证新特性，注册模态框！
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。