JSはユーザー登録インターフェース機能を実装します

JSはユーザー登録インターフェース機能を実装します

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

1.cssコード

*{
            マージン: 0;
            パディング: 0;
        }
        。ブロック{
            位置: 相対的;
            マージン: 0 自動;
            上マージン: 80px;
            幅: 710ピクセル;
            高さ: 500px;
            境界線: 1px実線 rgba(29, 29, 29, 0.64);
            背景: url("./img/logo2396.jpg")繰り返しなし;
            背景サイズ: 100%;
        }
        。写真 {
            位置: 絶対;
            zインデックス: 1;
            幅: 710ピクセル;
            高さ: 500px;
            背景色: rgba(0, 0, 0, 0.71);
        }
        .biao{
            上マージン: 20px;
            位置: 絶対;
            zインデックス: 2;
            左マージン: 150px;
        }
        li{
            位置: 相対的;
            パディング左:20px;
            リストスタイル: なし;
            行の高さ: 70px;
            幅: 400ピクセル;
            境界線: 1px 白の実線;
            マージン:5px 自動;
        }
        li 入力[タイプ=テキスト]{
            左パディング: 20px;
            境界線スタイル: なし;
            背景: なし;
        }
        入力[type=submit]{
            左マージン: 150px;
            境界線スタイル: なし;
            フォントサイズ: 25px;
            色: 白;
            背景: なし;
        }
        .d{
            背景色: rgba(222, 53, 3, 0.71);
        }
       。TXT{
           行の高さ: 50px;
           幅: 280ピクセル;
           フォントサイズ: 15px;
           色: 白;
       }
       。エラー {
           位置: 絶対;
           zインデックス: 2;
           左: 150px;
           色: rgba(253, 253, 253, 0.4);
           フォントサイズ: 14px;
       }

2.htmlコード

<div class="block">
    <div class="写真"></div>
    <div class="biao">
        <フォーム名="フォーム">
            <ul>
                <li><label style="color: white">口座番号:</label><input class="txt" type="text"></li>
                <li><label style="color: white">パスワード:</label><input class="txt" type="text"></li>
                <li><label style="color: white">パスワードの確認:</label><input class="txt" type="text"></li>
                <li><label style="color: white">電話番号:</label><input class="txt" type="text"></li>
                <li><label style="color: white">メールボックス:</label><input class="txt" type="text"></li>
                <li class="d"><input id="sub" type="submit" value="登録"></li>
            </ul>
        </フォーム>
    </div>
</div>

3.jsコード

 var sub=document.getElementById("sub");
 var txt = document.getElementsByClassName("txt");
     タグ名によって要素を取得します。
    document.forms.form.onsubmit=関数(){
        ヤン();
        var errl = document.getElementsByClassName("error").length;
        if(!errl){
            true を返します。
        }
        false を返します。
    };
    関数ヤン(){
        for(var i=0;i<txt.length;i++){
            txt[i].focus();
        }
        サブフォーカス();
    }
    (var i=0;i<txt.length;i++) の場合
    {
    txt[i].index=i;
    txt[i].onfocus=関数(){
    this.parentElement.children[2]==undefinedの場合、戻り値:
    this.parentElement.children[2]を削除します。
    };
    txt[i].onblur=関数(){
    スイッチ(this.index) {
        ケース0:
            if(this.value==""){
                var s = document.createElement("span");
                s.innerHTML="口座番号を入力してください";
                s.className="エラー";
                li[this.index].appendChild(s)
            }
            それ以外{
                var s = document.createElement("span");
                s.innerHTML="";
                s.className="成功";
                li[this.index].appendChild(s)
            }
            壊す;
        ケース1:
            if(this.value==""){
                var s = document.createElement("span");
                s.innerHTML="パスワードを入力してください";
                s.className="エラー";
                li[this.index].appendChild(s)
            }
            そうでない場合(この値の長さ<6||この値の長さ>11) {
                var s = document.createElement("span");
                s.innerHTML="パスワードが間違っています";
                s.className="エラー";
                li[this.index].appendChild(s);
               txt[this.index].value="";
            }
             それ以外{
                    var s = document.createElement("span");
                    s.innerHTML="";
                    s.className="成功";
                    li[this.index].appendChild(s)
                }
            壊す;
        ケース2:
            if(this.value==""){
                var s = document.createElement("span");
                s.innerHTML="パスワードをもう一度確認してください";
                s.className="エラー";
                li[this.index].appendChild(s);
                txt[this.index].value="";
            }
            そうでない場合(this.value!=txt[1].value){
                var s = document.createElement("span");
                s.innerHTML="再入力してください";
                s.className="エラー";
                li[this.index].appendChild(s);
                txt[this.index].value="";
            }
            それ以外{
                var s = document.createElement("span");
                s.innerHTML="";
                s.className="成功";
                li[this.index].appendChild(s)
            }
            壊す;
        ケース3:
            if(this.value==""){
                var s = document.createElement("span");
                s.innerHTML="数字を入力してください";
                s.className="エラー";
                li[this.index].appendChild(s)
            }
            そうでない場合(this.value.length!=11){
                var s = document.createElement("span");
                s.innerHTML="数値の形式が間違っています";
                s.className="エラー";
                li[this.index].appendChild(s)
                txt[this.index].value="";
            }
            それ以外{
                var s = document.createElement("span");
                s.innerHTML="";
                s.className="成功";
                li[this.index].appendChild(s)
            }
            壊す;
        ケース4:
            if(this.value==""){
                var s = document.createElement("span");
                s.innerHTML="メールアドレスを入力してください";
                s.className="エラー";
                li[this.index].appendChild(s)
            }
            それ以外{
                var s = document.createElement("span");
                s.innerHTML="";
                s.className="成功";
                li[this.index].appendChild(s)
            }
            壊す;
        }
      }
    }

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

以下もご興味があるかもしれません:
  • ログインと登録インターフェースを実装するためのjs
  • ポップアップ登録インターフェース効果を作成するための js マスク効果

<<:  Linux インストール Redis 実装プロセスとエラー解決

>>:  MySQLの一般的なバックアップコマンドとシェルバックアップスクリプトの共有

推薦する

MySQLの認証コマンドgrantの使い方

この記事の例は MySQL 5.0 以降で実行されます。ユーザー権限を付与するための MySQL コ...

Reactはダブルスライダークロススライドを実装します

この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...

パズル効果を実現するネイティブ js

この記事では、パズル効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的...

TypeScript 2.0 マーク付き共用体型の詳細な説明

目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...

Dockerコンテナのインポ​​ートとエクスポートに関するチュートリアル

背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...

同じ日の最初の3つのデータを取得するためのMySQLタイムラインデータ

テーブルデータを作成する テーブル `praise_info` を作成します ( `id` bigi...

MySQL の結合テーブルにインデックスを作成する方法

この記事では、MySQL で 2 つのテーブルを関連付ける結合テーブルにインデックスを作成する方法を...

IISとAPACHEはHTTPSへのHTTPリダイレクトを実装しています

7 のMicrosoft の公式 Web サイトから HTTP Rewrite モジュールをダウンロ...

CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...

Javascriptジェネレータの紹介と使用

ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...

jsでライトスイッチの効果を実現

この記事の例では、ライトスイッチ効果を実現するためのjsの具体的なコードを参考までに共有しています。...

Linux での scp および sftp コマンドの詳細な説明

目次序文1. SCPの使用法2. sftpを使用する3. scp と sftp の違いは何ですか?ど...

CentOS 6.5 の設定 ssh キーフリーログインで pssh コマンドを実行する方法の説明

1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...

アップロード画像コントロールを実現するネイティブ js

この記事の例では、アップロード画像コントロールを実装するためのjsの具体的なコードを参考までに共有し...