欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

H5用戶注冊(cè)表單頁(yè) 注冊(cè)模態(tài)框!

 更新時(shí)間：2016年09月17日 14:12:44   作者：li_han  
這篇文章主要為大家詳細(xì)介紹了H5用戶注冊(cè)表單頁(yè)的相關(guān)代碼，注冊(cè)模態(tài)框，如何設(shè)計(jì)用戶注冊(cè)表單頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本實(shí)例為大家分享了H5表單驗(yàn)證新特性，如何用戶注冊(cè)表單頁(yè)，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>用戶注冊(cè)表單頁(yè)</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 標(biāo)簽新特性-->
 <form>
  <!--email屬性-->
  郵箱類(lèi)型<input type="email"/><br/>
  <!--tel屬性-->
  電話類(lèi)型<input type="tel"/><br/>
  <!--number屬性-->
  數(shù)字類(lèi)型<input type="number"/><br/>
  <!--date屬性-->
  日期類(lèi)型<input type="date"/><br/>
  <!--month屬性-->
  月份類(lèi)型<input type="month"/><br/>
  <!--week屬性-->
  周期類(lèi)型<input type="week"/><br/>
  <!--range屬性-->
  數(shù)字范圍<input type="range" min="18" max="60"/><br/>
  <!--search屬性-->
  搜素類(lèi)型<input type="search"/><br/>
  <!--color屬性-->
  顏色選擇器<input type="color"/><br/>
  <!--url屬性-->
  網(wǎng)址類(lèi)型<input type="url"/><br/>
  <input type='submit'/>
 </form>
  <hr/>
 <div id="form_content">
  <form action="">
   <div class="dc"><h3>用戶注冊(cè)頁(yè)面</h3></div>
   <div class="dc"><b>用戶昵稱(chēng)</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">請(qǐng)輸入用戶名</p></div>
   <div class="dc"><b>用戶密碼</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">請(qǐng)輸入密碼</p></div>
   <div class="dc"><b>個(gè)人郵箱</b><input id="email" type="email" required/><p class="pc">清輸入郵箱</p></div>
   <div class="dc"><b>個(gè)人主頁(yè)</b><input id="url" type="url" required/><p class="pc">請(qǐng)輸入個(gè)人主頁(yè)(可不填)</p></div>
   <div class="dc"><b>聯(lián)系電話</b><input id="tel" type="tel" required/><p class="pc">請(qǐng)輸入聯(lián)系電話</p></div>
   <div class="dc"><b>你的年齡</b><input id="age" type="number" min="18" max="60" required/><p class="pc">請(qǐng)輸入你的年齡</p></div>
   <div class="dc"><b>出生日期</b><input id="date" type="date" required/><p class="pc">請(qǐng)選擇出生日期</p></div>
   <div class="dc"><input id="sub" type="submit" value="提交注冊(cè)"/></div>
  </form>
 </div>
 <script>
  var uname=document.getElementById('user');
  uname.onfocus=function(){
   this.nextElementSibling.style.display='block';
   this.nextElementSibling.innerHTML='8-12數(shù)字或字母組成';
  }
  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位數(shù)字/字母/英文符號(hào)組成';
  }
  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='請(qǐng)輸入你的常用郵箱';
  }
  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='請(qǐng)輸入你的個(gè)人主頁(yè)(選填)';
  }
  url.onblur=function(){
   if(this.validity.valid) {
    this.nextElementSibling.className = 'pc show_pass';
    this.nextElementSibling.innerHTML = '網(wǎng)址格式正確';
   }else if(this.validity.typeMismatch){
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='網(wǎng)址格式非法';
   }
  }
  var uphone=document.getElementById('tel');
  uphone.onfocus=function(){
   this.nextElementSibling.style.display='block';
   this.nextElementSibling.innerHTML='請(qǐng)輸入你的聯(lián)系電話';
  }
  uphone.onblur=function(){
   if(this.validity.valid){
    this.nextElementSibling.className='pc show_pass';
    this.nextElementSibling.innerHTML='電話號(hào)碼格式正確';
   }else if(this.validity.valueMissing){
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='電話號(hào)碼不能外空';
   }else if(this.validity.typeMismatch){
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='電話號(hào)碼格式非法';
   }
  }
  var uage=document.getElementById('age');
  uage.onfocus=function(){
   this.nextElementSibling.style.diplay='block';
   this.nextElementSibling.innerHTML='請(qǐng)輸入你的年齡';
  }
  uage.onblur=function(){
   if(this.validity.valid){
    this.nextElementSibling.className='pc show_pass';
    this.nextElementSibling.innerHTML='你的年齡符合注冊(cè)要求';
   }else if(this.validity.rangeOverflow){
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='你的年齡大于注冊(cè)范圍';
   }else if(this.validity.rangeUnderflow){
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='你的年齡小于注冊(cè)范圍'
   }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='請(qǐng)輸入你的出生日期';
  }
  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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論