English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

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 = 'URLの形式が正確です';
   }else if(this.validity.typeMismatch)
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='URLの形式が不正です';
   }
  }
  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>

これで本文のすべてが終わりです。皆様の学習に役立つことを願っています。また、呐喊教程を多くのサポートをお願いします。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、アップロードされた内容です。本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権に関する問題がある場合は、メールを送信してください：notice#oldtoolbag.com（メールを送信する際、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、本サイトは即座に侵害が疑われるコンテンツを削除します。)

基礎教程
おすすめ