【中級編4】JavaScriptとHTMLで会員登録画面を完成させよう

JavaScript入門

本記事では、今まで作ってきた会員登録画面の仕上げを行います。

前回の記事では、入力内容のチェックを行い、エラーがあった場合にアラートを表示させていました。

今回はエラー時にアラートではなく、エラー文を表示させるようにします。

実際の会員登録画面ではアラートではなく、エラー文を出すのが普通です。

JavaScriptとHTMLで会員登録画面を完成させる

JavaScriptとHTMLで会員登録画面を完成させましょう。

次のstepに従って解説していきます。

  • step1.会員登録画面のデザインを整える
  • step2.入力エラー文の表示をoffにしておく
  • step3.入力エラー時に表示をonにする
  • step4.会員登録完了画面に遷移させる

step1.会員登録画面のデザインを整える

まず、会員登録画面のデザインを整えておきましょう。

tableタグを使って、それぞれの入力フォームを横に表示するようにします。

○コード例

<form method="post" action="test.html"> <table width="1000"> <tr> <th>名前</th> <th><input type="text" maxlength="100" placeholder="山田太郎" id="name"> </tr> <tr> <th>名前(ふりがな)</th> <th><input type="text" maxlength="200" placeholder="やまだたろう" id="name_huri"></th> </tr> <tr> <th>メールアドレス</th> <th><input type="text" maxlength="254" placeholder="aaaa@gmail.com" id="mail"></th> </tr> <tr> <th>パスワード</th> <th><input type="password" maxlength="20" placeholder="半角英数8文字以上" id="pass"></th> </tr> <tr> <th>パスワード再入力</th> <th><input type="password" maxlength="20" placeholder="半角英数8文字以上" id="repass"></th> </tr> <tr> <th>郵便番号</th> <th><input type="text" maxlength="7" placeholder="ハイフンなし" id="yuubin"></th> </tr> <tr> <th>住所</th> <th><input type="text" maxlength="200" id="address"></th> </tr> <tr> <th>電話番号</th> <th><input type="text" maxlength="21" placeholder="ハイフンなし" id="phone"></th> </tr> <tr> <th>生年月日</th> <th><input type="date" name="calendar" max="9999-12-31" id="birth"></th> </tr> </table> <br/> <input type="submit" value="会員登録を行う" id="touroku"> </form> 

○実行結果

「名前 {入力欄}」などのように横に並ばせました。

入力欄の右側に、これからエラー時にエラー文を表示させるようにしていきます。

step2.入力エラー文の表示をoffにしておく

HTMLを変更して、エラー文を表示できるようにします。

会員登録ボタンが押されていない場合は、エラー文が表示されないようにしなくてはいけません。

style属性に「display: none」と指定することで、文字列を非表示にすることが可能です。

○コード例

<form method="post" action="test.html"> <table width="1000"> <tr> <th>名前</th> <th><input type="text" maxlength="100" placeholder="山田太郎" id="name"> <th id="name_chk" style="display: none; color: red;">名前が漢字になっていません</th> </tr> <tr> <th>名前(ふりがな)</th> <th><input type="text" maxlength="200" placeholder="やまだたろう" id="name_huri"></th> <th id="name_huri_chk" style="display: none; color: red;">名前(ふりがな)がひらがなになっていません</th> </tr> <tr> <th>メールアドレス</th> <th><input type="text" maxlength="254" placeholder="aaaa@gmail.com" id="mail"></th> <th id="mail_chk" style="display: none; color: red;">メールアドレスが形式に沿っていません</th> </tr> <tr> <th>パスワード</th> <th><input type="password" maxlength="20" placeholder="半角英数8文字以上" id="pass"></th> <th id="pass_chk" style="display: none; color: red;">パスワードが半角英数8文字以上になっていません</th> </tr> <tr> <th>パスワード再入力</th> <th><input type="password" maxlength="20" placeholder="半角英数8文字以上" id="repass"></th> <th id="repass_chk" style="display: none; color: red;">パスワードが最初と違っています</th> </tr> <tr> <th>郵便番号</th> <th><input type="text" maxlength="7" placeholder="ハイフンなし" id="yuubin"></th> <th id="yuubin_chk" style="display: none; color: red;">郵便番号が7桁になっていません</th> </tr> <tr> <th>住所</th> <th><input type="text" maxlength="200" id="address"></th> </tr> <tr> <th>電話番号</th> <th><input type="text" maxlength="21" placeholder="ハイフンなし" id="phone"></th> <th id="phone_chk" style="display: none; color: red;">電話番号が形式に沿っていません</th> </tr> <tr> <th>生年月日</th> <th><input type="date" name="calendar" max="9999-12-31" id="birth"></th> </tr> </table> <br/> <input type="submit" value="会員登録を行う" id="touroku"> </form> 

○実行結果

READ  【初級編4】JavaScriptのsetTimeoutでタイマー処理を使ってみよう

実行結果を見て分かる通り、HTMLが書かれているにも関わらず、何も表示されていません。

「display: none」を指定した効果です。

エラーがある場合は、JavaScriptによって「display: none」を「display: block」に変更します。

こうすることで、エラー時のみに文字列を表示できるのです。

step3.入力エラー時に表示をonにする

それではJavaScriptを使って、入力エラー時にエラー文を表示させましょう。

○コード例

<script> document.getElementById("touroku").onclick = function() {     const name = document.getElementById("name").value;     const name_huri = document.getElementById("name_huri").value;     const mail = document.getElementById("mail").value;     const pass = document.getElementById("pass").value;     const repass = document.getElementById("repass").value;     const yuubin = document.getElementById("yuubin").value;     const address = document.getElementById("address").value;     const phone = document.getElementById("phone").value;     const birth = document.getElementById("birth").value;      var flag = 0;     if(name.length == 0){flag = 1;}     if(name_huri.length == 0){ flag = 1; }     if(mail.length == 0){ flag = 1; }     if(pass.length == 0){ flag = 1; }     if(repass.length == 0){ flag = 1; }      if(flag == 1){ alert('必須項目が未記入の箇所があります'); return false; }     else{         flag_chk = 0;          var regexp = /[一-龠]/;         if(regexp.test(name) != true){ document.getElementById('name_chk').style.display = "block"; flag_chk = 1; }         else{ document.getElementById('name_chk').style.display = "none"; }          var regexp = /^[\u{3000}-\u{301C}\u{3041}-\u{3093}\u{309B}-\u{309E}]+$/mu;         if(regexp.test(name_huri) != true){ document.getElementById('name_huri_chk').style.display = "block"; flag_chk = 1; }         else{ document.getElementById('name_huri_chk').style.display = "none"; }          var regexp = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;         if(regexp.test(mail) != true){ document.getElementById('mail_chk').style.display = "block"; flag_chk = 1; }         else{ document.getElementById('mail_chk').style.display = "none"; }          var regexp = /^([a-zA-Z0-9]{8,})$/;         if(regexp.test(pass) != true){ document.getElementById('pass_chk').style.display = "block"; flag_chk = 1; }         else{ document.getElementById('pass_chk').style.display = "none"; }          if(pass != repass){ document.getElementById('repass_chk').style.display = "block"; flag_chk = 1; }         else{ document.getElementById('repass_chk').style.display = "none"; }          var regexp = /^\d{7}$/;         if(regexp.test(yuubin) != true){ document.getElementById('yuubin_chk').style.display = "block"; flag_chk = 1; }         else{ document.getElementById('yuubin_chk').style.display = "none"; }          var regexp = /^(0{1}\d{9,10})$/;         if(regexp.test(phone) != true){ document.getElementById('phone_chk').style.display = "block"; flag_chk = 1; }         else{ document.getElementById('phone_chk').style.display = "none"; }          if(flag_chk == 1){ return false; }         else{ return ture; }     } };  </script> 

○実行結果

各入力内容のチェックでエラーが発覚した場合、「display: none」を「display: block」に変更しています。

getElementByIdを使って変更箇所のIDを指定する必要があります。

エラーではない場合は、「display: none」を指定し、エラー文が出ない状態にします

これで、エラー時にアラートではなく、エラー文を表示させることができました。

step4.会員登録完了画面に遷移させる

最後に、エラーが発生しなかった場合に、会員登録画面に遷移させる処理を行いましょう。

HTMLのformタグのaction属性には現在「test.html」が指定されています。

ここを別のURLにすることで、会員登録ボタンを押したときに別画面に移動させられます。

○コード例

<form method="post" action="test2.html"> 

今回は会員登録完了画面を「test2.html」としaction属性に指定しました。

これで会員登録ボタンを押したら、会員登録完了画面に移動できるようになりました。

このように、action属性にURLを指定することで、指定の画面に移動できます。

以上が、JavaScriptとHTMLを使っての会員登録画面の作り方です。

まとめ

本記事では、会員登録画面の仕上げを行いました。

getElementByIdを上手く使うことで、エラー文を表示させることが可能です。

これで会員登録画面の作り方は一通り説明が完了しました。

なお、実際の開発では、サーバー側でデータベースにアクセスし、登録済みのユーザーではないか、不正ユーザーではないか、などチェックをする必要があります。

サーバー側の処理は、PHPやPythonを使うことになります

こちらの言語も勉強しておくと、Webサイト開発において幅広い分野に対応ができるでしょう。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
Visited 17 times, 1 visit(s) today

コメント

タイトルとURLをコピーしました