JavaScript はパスワードボックスの入力検証を実装します

JavaScript はパスワードボックスの入力検証を実装します

サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必要がある場合があります。

たとえば、フィールドの入力長を制限するには、次のようにします。

入力ボックスの後に入力範囲のプロンプトメッセージが表示されます。間違った長さを入力するとエラープロンプトメッセージになります。正しい長さを入力すると正しいプロンプトメッセージが表示されます。

実装のアイデア

1. 最初に入力プロンプト情報を記述します。
2. エラークラスと修正クラスを定義し、対応するスタイルを記述する
3. 入力ボックス要素オブジェクトを取得し、if ステートメントを使用して属性値の長さを決定し、異なる結果に応じて異なるプロンプト情報コンテンツを表示し、異なるプロンプト情報クラス名を設定してスタイルを切り替えます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>パスワードボックスの入力プロンプト</title>
    <スタイル>
        div {
            幅: 600ピクセル;
            マージン: 100px 自動;
        }
        
        入力{
            アウトライン: なし;
        }
        
        。メッセージ {
            表示: インラインブロック;
            フォントサイズ: 12px;
            色: #999;
            背景: url(images/ 提示.png) 繰り返しなし 左 中央/16px 16px;
            左パディング: 20px;
        }
        
        。間違っている {
            背景画像: url(images/error.png);
            色: 赤;
        }
        
        。右 {
            背景画像: url(images/correct.png);
            色: 緑;
        }
    </スタイル>
</head>

<本文>
    <div class="register">
        <input type="password" class="inp">
        <p class="message">8~18 桁のパスワードを入力してください</p>
    </div>
    <スクリプト>
        var パスワード = document.querySelector('.inp');
        var メッセージ = document.querySelector('.message');

        パスワード.onblur = 関数() {
            (この値の長さが8未満の場合 || この値の長さが18超の場合){
                message.innerHTML = 'パスワードの長さが正しくありません。8〜18 文字にする必要があります';
                message.className = 'メッセージが間違っています';
            } それ以外 {
                message.innerHTML = 'パスワードの長さは正しいです';
                message.className = 'メッセージ権利';
            }
        }
    </スクリプト>
</本文>

</html>

ページ効果:

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

以下もご興味があるかもしれません:
  • JSはパスワードボックス効果を実現します
  • JS は、フォーム内の小さな目をクリックして、非表示のパスワード ボックスにパスワードを表示するように実装します。
  • jsは入力パスワードボックスの表示/非表示機能を実装します
  • パスワード ボックスのパスワード表示とパスワード非表示機能の JS 実装例
  • パスワードボックス(password)のテキストプロンプト機能コードをJSベースで実装する
  • パスワード入力ボックスのプロンプト情報を js で実装する方法(html5 実装方法付き)
  • JavaScript は入力ボックス (パスワード ボックス) にプロンプ​​トを実装します。
  • JavaScript を使用してテキスト ボックス (パスワード ボックス) にプロンプ​​トを入力する方法
  • JSはフォーカス制御テキストの取得と喪失に応じてパスワードボックスの消失と表示効果を実現します
  • ユーザーが実装コードを貼り付けたりコピーしたりできないようにするための JavaScript パスワード ボックス
  • js正規表現で実装されたパスワードボックスは簡単に作成でき、使用したい記号に置き換えることもできます
  • JavaScript はフロントエンドのパスワード ボックスの一般的な関数のプラクティスをロック解除します

<<:  docker によってプルされたイメージがどこに保存されるかの詳細な説明

>>:  MySQL の int(n) の後の n はどういう意味ですか?

推薦する

MySQL 8.0 をインストールした後、初めてログインするときにパスワードを変更する問題を解決する

MySQL 8.0.16で初回ログイン時のパスワードを変更する方法を紹介します。 MySQLデータベ...

TypeScriptの列挙型を詳しく説明する

目次1. デジタル列挙2. 文字列の列挙3. 逆マッピング4. 異種列挙5. 定数列挙6. 列挙メン...

HTML入力ボックスの最適化により、ユーザーエクスペリエンスと使いやすさが向上します。

ユーザーエクスペリエンスと使いやすさを向上させるために、入力ボックスなど、Web ページでユーザーが...

js キャンバスで円形の水のアニメーションを実現

この記事の例では、円形の水のアニメーションを実現するためのキャンバスの具体的なコードを参考までに共有...

JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...

JavaScript関数の詳細な説明これを指す問題

目次1.関数内のこの方向1. 通常の機能2. コンストラクター3. オブジェクトメソッド4. イベン...

テーブル内の要素のドラッグと並べ替えの問題について簡単に説明します

最近、要素テーブルを使用すると、並べ替えの問題によく遭遇します。単純な並べ替えであれば、要素の公式が...

Unix/Linuxフォークの隠れたオーバーヘッド

目次1. フォークの起源2. 初期のUNIXオーバーレイ技術3. UNIXに導入される前のフォークの...

3分でUbuntu 16.04を初期化し、Java、Maven、Docker環境をデプロイする

Fast-Linux プロジェクト アドレス: https://gitee.com/uitc/Fas...

dockerでpdflatex環境を設定する方法

技術的背景Latex は文書作成、特に記事作成には欠かせないツールであり、必須のテキスト組版ツールで...

line-height=height要素の高さだがテキストが垂直方向に中央揃えされない問題を解決する

まず、行の高さが要素の高さと等しい場合にテキストが垂直方向に中央揃えにならない理由を説明します。実際...

FirefoxのWeb開発者を使用してWebページのスタイルを無効にする方法

前提条件: Web開発者プラグインがインストールされている操作手順: [ツール] -> [We...

MySQL 4 データをインポートする方法

1. mysqlコマンドをインポートするmysql コマンドのインポート構文は次のとおりです。 my...

JavaScript でプライベート変数を宣言する 2 つの方法

序文JavaScript は、キーワードを使用してプライベート変数を宣言できる他の言語とは異なります...

Docker で Redis クラスターを素早く構築する方法の例

Redis クラスターとはRedis クラスターは、R​​edis が提供する分散データベース ソリ...