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>

ページ効果: