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 インストール 最新の詳細なグラフィックチュートリアル
推薦する
VMware Workstation 14 Pro は CentOS 7.0 をインストールします
VMware Workstation 14 ProにCentOS 7.0をインストールする具体的な方...
Dockerコンテナオーケストレーション実装プロセス分析
実際の開発環境や本番環境では、コンテナを独立して実行することはあまりなく、複数のコンテナを一緒に実行...
MySQLインデックスの簡単な分析
データベース インデックスは、テーブル操作の速度を向上させることを目的としたデータ構造です。高速なラ...
TypeScript のユニオン型、交差型、型ガード
目次1. ユニオンタイプ2. クロスオーバータイプ3. 型保護3.1 カスタム型保護3.2 保護の種...
JavaScript 高度なカスタム例外
目次1. コンセプト1.1 エラーと例外とは何ですか? 1.2 異常の分類2. 例外処理2.1try...
Vue ページ印刷で自動ページングを実装する 2 つの方法
この記事では、ページ印刷の自動ページングを実現するためのVueの具体的なコードを例として紹介します。...
LinuxシステムにDockerをインストールするプロセス
このブログでは、Docker をインストールするプロセスを簡単な手順で説明します。Docker のイ...
SpringbootはDockerデプロイメントを統合し、Dockerイメージを構築する2つの方法を実装します。
Docker は、あらゆるアプリケーション用の軽量でポータブルな自己完結型コンテナーを簡単に作成で...
CSS3 の display:grid、グリッドレイアウトの紹介
1. グリッドレイアウト（グリッド）: Web ページをグリッドに分割し、さまざまなグリッドを組み合...
MySQL データベースの一般的な基本操作の分析 [データベースの作成、表示、変更、削除]
この記事では、例を使用して、MySQL データベースの一般的な基本操作について説明します。ご参考まで...
MySQL と Golan 間の従来の分散トランザクションのための 7 つのソリューション
目次1. 基本理論1.1 取引1.2 分散トランザクション2. 分散トランザクションソリューション2...
Nginx でバージョン番号を隠す方法
Nginx はバージョン番号を非表示にする実稼働環境では、セキュリティ上の脆弱性の漏洩を避けるために...
Docker /var/lib/docker/aufs/mnt ディレクトリのクリーニング方法
会社のサービスはdockerを使用しており、ディスクマンが見つかりました。その後、次のコマンドを実行...
NavicatでMySQLビッグデータをインポートする際のエラーの解決方法
Navicat がエクスポートしたデータはインポートできません。最後に、MySQLコマンドのインポー...
JS 開発効率を上げる4つの超実践的なヒント
目次1. 短絡判定2. オプション連鎖演算子 (?) 3. ヌル合体演算子 (??) 4. 終了関数...