H5用户注册表单页 注册模态框!
本实例为大家分享了H5表单验证新特性，如何用户注册表单页，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>用户注册表单页</title>
<style>
#form_content{
width:600px;
margin:0auto;
position:absolute;
left:400px;
}
#form_content.dc{
width:600px;
margin-top:10px;
overflow:hidden;
}
#form_content.dch3{
text-align:center;
}
#form_contentb{
display:inline-block;
height:40px;
line-height:40px;
margin-left:20px;
}
#form_contentinput{
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:020px0;
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属性-->
邮箱类型<inputtype="email"/><br/>
<!--tel属性-->
电话类型<inputtype="tel"/><br/>
<!--number属性-->
数字类型<inputtype="number"/><br/>
<!--date属性-->
日期类型<inputtype="date"/><br/>
<!--month属性-->
月份类型<inputtype="month"/><br/>
<!--week属性-->
周期类型<inputtype="week"/><br/>
<!--range属性-->
数字范围<inputtype="range"min="18"max="60"/><br/>
<!--search属性-->
搜素类型<inputtype="search"/><br/>
<!--color属性-->
颜色选择器<inputtype="color"/><br/>
<!--url属性-->
网址类型<inputtype="url"/><br/>
<inputtype='submit'/>
</form>
<hr/>
<divid="form_content">
<formaction="">
<divclass="dc"><h3>用户注册页面</h3></div>
<divclass="dc"><b>用户昵称</b><inputid="user"type="text"autofocusrequiredpattern="^[0-9a-zA-Z]{6,10}$"/><pclass="pc">请输入用户名</p></div>
<divclass="dc"><b>用户密码</b><inputid="pwd"type="password"requiredpattern="^\w{8,12}$"/><pclass="pc">请输入密码</p></div>
<divclass="dc"><b>个人邮箱</b><inputid="email"type="email"required/><pclass="pc">清输入邮箱</p></div>
<divclass="dc"><b>个人主页</b><inputid="url"type="url"required/><pclass="pc">请输入个人主页(可不填)</p></div>
<divclass="dc"><b>联系电话</b><inputid="tel"type="tel"required/><pclass="pc">请输入联系电话</p></div>
<divclass="dc"><b>你的年龄</b><inputid="age"type="number"min="18"max="60"required/><pclass="pc">请输入你的年龄</p></div>
<divclass="dc"><b>出生日期</b><inputid="date"type="date"required/><pclass="pc">请选择出生日期</p></div>
<divclass="dc"><inputid="sub"type="submit"value="提交注册"/></div>
</form>
</div>
<script>
varuname=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='pcshow_pass';
this.nextElementSibling.innerHTML='用户名格式正确';
}
elseif(this.validity.valueMissing){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='用户名不能为空';
}elseif(this.validity.patternMismatch){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='用户名格式非法';
}
}
varupwd=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='pcshow_pass';
this.nextElementSibling.innerHTML='密码格式正确';
}elseif(this.validity.valueMissing){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='用户密码不能为空';
}elseif(this.validity.patternMismatch){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='密码格式非法';
}
}
vare_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='pcshow_pass';
this.nextElementSibling.innerHTML='邮箱格式正确';
}elseif(this.validity.valueMissing){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='邮箱不能为空';
}elseif(this.validity.typeMismatch){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='邮箱格式有误';
}
}
varurl=document.getElementById('url');
url.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='请输入你的个人主页(选填)';
}
url.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pcshow_pass';
this.nextElementSibling.innerHTML='网址格式正确';
}elseif(this.validity.typeMismatch){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='网址格式非法';
}
}
varuphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='请输入你的联系电话';
}
uphone.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pcshow_pass';
this.nextElementSibling.innerHTML='电话号码格式正确';
}elseif(this.validity.valueMissing){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='电话号码不能外空';
}elseif(this.validity.typeMismatch){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='电话号码格式非法';
}
}
varuage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.diplay='block';
this.nextElementSibling.innerHTML='请输入你的年龄';
}
uage.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pcshow_pass';
this.nextElementSibling.innerHTML='你的年龄符合注册要求';
}elseif(this.validity.rangeOverflow){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='你的年龄大于注册范围';
}elseif(this.validity.rangeUnderflow){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='你的年龄小于注册范围'
}elseif(this.validity.valueMissing){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='年龄不能为空';
}
}
varudate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='请输入你的出生日期';
}
udate.onblur=function(){
if(this.validity.valueMissing){
this.nextElementSibling.className='pcshow_warn';
this.nextElementSibling.innerHTML='出生日期不能为空';
}elseif(this.validity.valid){
this.nextElementSibling.className='pcshow_pass';
this.nextElementSibling.innerHTML='已选择出生日期';
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。