富贵资源网

H5用户注册表单页 注册模态框!
站长资源 2024/11/13 佚名
79 1538
富贵资源网 Design By www.hznty.com

本实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
富贵资源网 Design By www.hznty.com