jsでユーザー登録機能を実装する

jsでユーザー登録機能を実装する

この記事の例では、ユーザー登録機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1.HTMLコード構造

<本文>
       <FORM action="success.html" method="post" name="myform" onSubmit="return checkForm()">
                <表の境界線="0" セルのパディング="0" セルの間隔="0" 配置="中央">
                    <TR>
                        <TD height="108" colspan="2"><IMG src="D:\Microsoft VS Code\421\img\touxiang.png"></TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">ユーザー名:</TD>
                        <TD width="524"><INPUT name="txtUser" type="text" maxlength="16">文字または数字のみ、4~16 文字</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">パスワード:</TD>
                        <TD width="524"><INPUT name="txtPass" type="password">パスワードの長さは 6 ~ 12 文字です</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">パスワードの確認:</TD>
                        <TD width="524"><INPUT name="txtRPass" type="password"></TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">性別:</TD>
                        <TD 幅="524">
                            <INPUT name="gen" type="radio" value="Male" チェック済み>男性 
                            <INPUT name="gen" type="radio" value="女" class="input">女</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">メールアドレス:</TD>
                        <TD width="524"><INPUT name="txtEmail" type="text">
                        有効なメールアドレスを入力してください</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">生年月日:</TD>
                        <TD 幅="524">
                            <INPUT name="year" id="year" size=4 maxlength=4 >&nbsp;年&nbsp;&nbsp;
                                <SELECT name="月" >
                                    <OPTION value=1>1月</OPTION>
                                    <OPTION value=2>2月</OPTION>
                                    <OPTION value=3>3月</OPTION>
                                    <OPTION value=4>4月</OPTION>
                                    <OPTION value=5>5月</OPTION>
                                    <OPTION value=6>6月</OPTION>
                                    <OPTION value=7>7月</OPTION>
                                    <OPTION value=8>8月</OPTION>
                                    <OPTION value=9>9月</OPTION>
                                    <OPTION value=10>10月</OPTION>
                                    <OPTION value=11>11月</OPTION>
                                    <OPTION value=12>12月</OPTION>
                                </SELECT>&nbsp;月&nbsp;&nbsp;
                                 <SELECT name="日" >
                                    <OPTION 値=1>1</OPTION><OPTION 値=2>2</OPTION><OPTION 値=3>3</OPTION><OPTION 値=4>4</OPTION>
                                    <OPTION 値=5>5</OPTION><OPTION 値=6>6</OPTION><OPTION 値=7>7</OPTION><OPTION 値=8>8</OPTION>
                                    <OPTION 値=9>9</OPTION><OPTION 値=10>10</OPTION><OPTION 値=11>11</OPTION><OPTION 値=12>12 </OPTION>
                                    <OPTION 値=13>13</OPTION><OPTION 値=14>14</OPTION><OPTION 値=15>15</OPTION><OPTION 値=16>16</OPTION>
                                    <OPTION 値=17>17</OPTION><OPTION 値=18>18</OPTION><OPTION 値=19>19</OPTION><OPTION 値=20>20</OPTION>
                                    <OPTION 値=21>21</OPTION><OPTION 値=22>22</OPTION><OPTION 値=23>23</OPTION><OPTION 値=24>24</OPTION>
                                    <OPTION 値=25>25</OPTION><OPTION 値=26>26</OPTION><OPTION 値=27>27</OPTION><OPTION 値=28>28</OPTION>
                                    <OPTION 値=29>29</OPTION><OPTION 値=30>30</OPTION><OPTION 値=7>31</OPTION>
                                </SELECT>&nbsp;日</TD>
                    </TR>
                    <TR>
                      <TD colspan="2" align="center">
                        <INPUT type="submit" value="以下の規約に同意して送信">
                      </TD>
                   </TR>
                  <TR>
                     <TD colspan="2">
                        <TEXTAREA cols="" rows="" readOnly="true" style="width:480px;height:110px;font-size:12px;color: #666">
                            I. 一般規定 1.1 ユーザーは本契約の条件に同意し、ページの指示に従ってすべての登録手続きを完了するものとします。ユーザーが登録プロセス中に「同意する」ボタンをクリックすると、ユーザーは Baidu と合意に達し、本契約のすべての条件を完全に受け入れたことになります。
                            1.2 ユーザーが正常に登録すると、Baidu は各ユーザーにユーザー アカウントと対応するパスワードを付与します。ユーザーはユーザー アカウントとパスワードを保持する責任を負い、ユーザー アカウントを使用して実行されるすべてのアクティビティとイベントに対して法的責任を負うものとします。
                            1.3 ユーザーは、Baidu の各チャネルの個別サービスを利用することができます。ユーザーが Baidu の個別サービスを利用する場合、その利用行為は、個別サービスの利用規約および Baidu が個別サービス内で発する各種告知に同意したものとみなされます。
                            1.4 Baidu 会員サービス契約および各チャネルの個別のサービス条件とお知らせは、Baidu によって予告なくいつでも更新される場合があります。関連するサービスをご利用になる場合は、適用される条件に注意し、遵守する必要があります。
                              Baidu が提供するサービスをご利用になる前に、このサービス契約をよくお読みください。お客様が本サービス契約および/またはその変更にいつでも同意しない場合は、Baidu が提供するサービスを積極的にキャンセルすることができます。Baidu サービスを利用すると、Baidu がいつでも行うサービス契約の変更を含め、本サービス契約のすべての内容を理解し、完全に同意したものとみなされ、Baidu ユーザーになります。
                         </テキストエリア>
                     </TD>
                  </TR>
                </表>
      </フォーム>
</本文>

写真は自分で追加する必要があることに注意してください

2.JSコード構造

<SCRIPT type="text/javascript" language="javascript">
                関数 checkForm(){
                    if(checkUserName()&&checkPass()&&checkEmail()&&checkDate()){
                        true を返します。
                    }それ以外{
                        false を返します。
                    }
                }
                //ユーザー名が空でないかどうかの検証 + 長さの検証 + 合法性の検証関数 checkUserName(){
                    var name = document.myform.txtUser;
                    if(name.value==""){
                        alert("ユーザー名を入力してください");
                        名前.focus();
                        false を返します。
                    }else if(name.value.length<4||name.value.length>16){//ユーザー名の長さの確認アラート("入力されたユーザー名の長さは 4 ~ 16 文字です");
                        名前を選択します。
                        false を返します。
                    }
                    //ユーザー名入力の正当性検証 for(var i=0;i<name.value.length;i++)
                    {
                        var charTest = name.value.toLowerCase().charAt(i);
                        if( (!(charTest>='0' && charTest<='9')) && (!(charTest>='a' && charTest<='z')) && (charTest!='_') )
                        {
                        alert("メンバー名に不正な文字が含まれています。使用できるのは a ~ z、0 ~ 9、およびアンダースコアのみです");
                        名前を選択します。
                        false を返します。
                        }
                    }
                    true を返します。
                }
                //パスワードが空でないかどうかの検証 + 確認の検証 + 長さの検証関数 checkPass(){
                    var pass=document.myform.txtPass;
                    var rpass=document.myform.txtRPass;
                    if(pass.value==""){
                        alert("パスワードは空にできません");
                        パス.focus();
                        false を返します。
                    }そうでない場合(pass.value.length<6||pass.value.length>12){
                        alert("パスワードは6〜12文字でなければなりません");
                        パスを選択します。
                        false を返します。
                    }
                    //パスワードの一貫性検証を確認する if (rpass.value!=pass.value) {
                        alert("確認パスワードは入力したパスワードと一致しません");
                        rpass.select();
                        false を返します。
                    }
                    true を返します。
                }
                
                //メール検証関数 checkEmail(){
                    var strEmail=document.myform.txtEmail;
                    (strEmail.value.length==0)の場合
                    {
                        alert("メールアドレスは空欄にできません!");
                        strEmail.focus();
                        false を返します。
                    }そうでない場合 (strEmail.value.indexOf("@",0)==-1)
                    {
                        alert("メールの形式が正しくありません\n@記号を含める必要があります!");
                        strEmail.select();
                        false を返します。
                    }そうでない場合 (strEmail.value.indexOf(".",0)==-1){
                        alert("メールの形式が正しくありません。. 記号が含まれている必要があります!");
                        strEmail.select();
                        false を返します。
                    } //@ と . 文字は文頭には使用できません else if(strEmail.value.charAt(0)=="@"||strEmail.value.charAt(0)=="."){
                        alert("@ および . 記号は電子メール アドレスの先頭には使用できません");
                        strEmail.select();
                        falseを返す;+
                    } //@ および . 文字は文末には使用できません。else if(strEmail.value.charAt(strEmail.value.length-1)=="@"||strEmail.value.charAt(strEmail.value.length-1)=="."){
                        alert("@ および . 記号は電子メール アドレスの最後の桁として使用できません");
                        strEmail.select();
                        false を返します。
                    }
                    true を返します。
                }
                //生年月日を確認する function checkDate(){
                    var year = document.myform.year;
                    var time = 新しい Date();
                    if(year.value==""){//空でない検証アラート("生年月日を入力してください");
                        年.フォーカス();
                        false を返します。
                    }else if(isNaN(year.value)){//数値検証アラート("数値を入力してください");
                        年.フォーカス();
                        false を返します。
                    }else if(parseInt(year.value)<1949||parseInt(year.value)>time.getYear()){//入力範囲検証アラート("年範囲は1949年から"+time.getYear()+"year");
                        年を選択します();
                        false を返します。
                    }それ以外{
                        true を返します。
                    }
                }
</スクリプト>

3. 効果は次のように表示されます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jsはユーザー登録情報の検証コードを実装するだけです
  • ユーザー登録用の一般的な JavaScript コード
  • JSは、ユーザーが登録するときにSMS認証コードとカウントダウンを取得する機能を実装します
  • PHP ユーザー登録ページでは、フォーム検証を実行するために js を使用します。具体的な例
  • ユーザーが登録する際にパスワードの強度を判断するために使用されるJSコード
  • ユーザー登録とログインを実装するには、JSP で Bean とサーブレットを使用します。
  • JavaScript のユーザー登録プロンプト効果の簡単な例
  • Node.js (Express) のユーザー登録、ログイン、認証メソッドを素早く構築する方法
  • Nodejsはユーザー登録機能を実装します
  • jsはユーザー登録同意のカウントダウンメソッドを実装します

<<:  Dockerの基礎

>>:  MySQL ダーティ ページ フラッシュとテーブル スペースの縮小の原理の分析

推薦する

MySQL5.7 並列レプリケーションの原理と実装

データ操作とメンテナンスに少しでも知識のある人なら、MySQL 5.5 以前では再生に単一の SQL...

Vueのウォッチリスナーの使い方を説明する記事

目次リスナーウォッチ形式リスナーを設定します。要約するリスナーウォッチ関数名は、リッスンする要素の名...

Mysql Workbench クエリ mysql データベース メソッド

Mysql Workbench はオープンソースのデータベース クライアントです。このオープンソース...

JQuery データグリッドクエリの詳細な説明

目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....

a タグをクリックして入力ファイルのアップロードダイアログボックスを表示する方法

htmlコードをコピーコードは次のとおりです。 <SPAN class=tag><...

MACでMYSQLデータベースのパスワードを忘れた場合の解決策

Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...

MySQL で浮動小数点データを文字データに変換するときに起こりうる問題の詳細な説明

序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...

Docker がポート 2375 を公開し、サーバー攻撃を引き起こす問題と解決策

docker リモート API を学習した学生であれば、ポート 2375 についてよくご存知だと思い...

MySQL 5.7 における部分テーブルのデュアルマスター同期の実装プロセスの詳細な説明

序文最近、私はある要件に遭遇しました。会社の業務上、2 つのデータベース間の一部のテーブルは、リアル...

モバイルブラウザが位置をサポートしない場合の解決策: 修正

具体的な方法は以下の通りです。 CSSコードコードをコピーコードは次のとおりです。 .wap_bot...

CentOS で RPM を使用して MySQL 5.6 をインストールするチュートリアル

これまでのプロジェクトはすべて Windows システム環境にデプロイされていました。今回は Lin...

Vue カプセル化 TabBar コンポーネントの完全なステップ記録

目次実装のアイデア:ステップ 1: TabBar と TabBarItem のコンポーネント カプセ...

デザインスキルを向上させる良い方法

いわゆる才能(左脳と右脳)つまり、芸術的な才能があるかどうかは、人間の左脳と右脳の分業によって主に決...

データ型の判断における js typeof と instanceof の違いと、その開発と使用について

目次1. typeof演算子2. インスタンスオブ演算子3. typeof と instanceof...

MySQL の効率的なクエリの左結合とグループ化 (プラス インデックス)

mysql 効率的なクエリMySQL は、左結合の速度を上げるために group by を犠牲にし...