JavaScriptはパスワードボックスの検証情報を実装します
|
この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例として紹介します。具体的な内容は次のとおりです。
エフェクト表示:
コードショーケース
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<タイトル></タイトル>
<link rel="スタイルシート" type="text/css" href="fontss2/iconfont.css" rel="外部nofollow" />
<スタイル>
.org{
フォントサイズ: 13px;
色:ディープスカイブルー;
}
。間違っている {
フォントサイズ: 13px;
色: 赤;
}
。右 {
フォントサイズ: 13px;
色: 緑;
}
</スタイル>
</head>
<本文>
<p>
<input type="text"><span class="orginal icon-wenhao iconfont">6～16 桁のパスワードを入力してください</span>
</p>
<スクリプト>
//要素オブジェクトを取得します。var input = document.querySelector('input');
var span = document.querySelector('span');
//フォーカスを失ったイベントを登録する event input.onblur = function() {
入力値の長さが 0 より大きい場合、入力値の長さが 6 より小さい場合、入力値の長さが 16 より大きい場合、
span.className = 'iconfont icon-cuowuguanbiquxiao-xianxingyuankuang が間違っています';
span.innerHTML='入力エラー、6〜16桁のパスワードを入力してください';
}それ以外の場合、入力値の長さ >=6 && 入力値の長さ <=16) {
span.className = 'iconfont icon-yiyanzheng right';
span.innerHTML = '正しく入力してください';
}それ以外 {
span.className = 'オリジナルアイコン-wenhaoアイコンフォント';
span.innerHTML = '6〜16文字のパスワードを入力してください';
}
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: TortoiseSvn Little Turtle インストール 最新の詳細なグラフィックチュートリアル
推薦する
Dockerコンテナデータボリュームの原理と使用法の分析
コンテナデータボリュームとはデータがコンテナ内にある場合、コンテナを削除するとデータは失われます。例...
MySQLの半同期の詳細な説明
目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...
実行中の Docker コンテナにボリュームを動的に追加する方法
以前、Docker コンテナの起動後にボリュームをマウントできるかどうか尋ねられたことがあります。m...
SQL グループ化により重複を削除し、他のフィールドで並べ替える
必要：あるフィールドの同一項目を結合し、別の時間フィールドで並べ替えます。例：初めに テーブルから都...
Linux sftp コマンドの使用法
SFTPの概念sftp は、安全なファイル転送プロトコルである Secure File Transf...
Vueはシンプルなマーキー効果を実装します
この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...
Linux環境でユーザーにsudo権限を追加する方法
sudo 設定ファイルsudo のデフォルトの設定ファイルは /etc/sudoers です。一般的...
Vueはシンプルなショッピングカートの例を実装します
この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...
Vite と Vue CLI の長所と短所
Vue エコシステムには Vite と呼ばれる新しいビルド ツールがあり、Vue CLI よりも 1...
フロントエンドHTMLスキン変更機能の実装コード
透明を含む5つの肌の色を変更するには50行のコードが必要です最初にコードをお渡ししますので、ご自身で...
Mac M1 での Nginx のマルチサイト構成の実装
注: nginxはbrew経由でインストールされますウェブサイトのルートディレクトリ: /opt/h...
Linux での tcpdump コマンド例の詳細な説明
序文簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...
HTMLインライン要素とブロックレベル要素の基本概念と使用例
HTML タグには、インライン要素とブロックレベル要素の 2 種類があります。まず、インライン要素と...
docker コンペ応募でよく使われるコマンドのまとめ
アカウントにログイン DOCKER_REGISTRY=registry.cn-hangzhou.al...
Vue-cliに基づくコードセットは複数のプロジェクトをサポートします
目次アプリケーションシナリオアイデアプロジェクト構造全体的なプロジェクト構造webpack パッケー...