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 インストール 最新の詳細なグラフィックチュートリアル
推薦する
HTMLドキュメントタイプの詳細な説明
私のは: <!DOCTYPE html>ブログガーデン: <!DOCTYPE HT...
Web デザイン TabIndex 要素
TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...
ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード
前に書いたものは複雑すぎるので、シンプルなコアにしましょう <html> <ヘッド...
MySQLのメモリ使用量を表示する方法の詳細な説明
序文この記事では主にMySQLのメモリ使用量に関する関連コンテンツを紹介し、皆さんの参考と学習のため...
固定テーブル幅テーブルレイアウト: 固定
テーブルを画面全体（残りの空白領域）に表示するために、幅属性は 100% と定義されることが多く、セ...
MySQLキーワードDistinctの詳細な紹介
MySQLキーワードDistinctの使い方の紹介DDL SQLを準備します: テーブルテストを作成...
CentOS7でPHPスケジュールタスクを実行する方法
序文この記事は主に CentOS7 で PHP スケジュールタスクを実行することに関する関連コンテン...
CSS を使用して 3 つのステップでショッピング モールのカード クーポンを作成する
今日は618日、主要なショッピングモールはすべてプロモーション活動を行っています。今日は、次のように...
Vue の新しいおもちゃ VueUse の具体的な使い方
目次序文VueUseとは使いやすいおなじみの手ぶれ補正やスロットル機能もありますグローバル状態を共有...
HTMLでカメラを読み込む方法
効果図: 全体的な効果: ビデオ読み込み中: 写真：ステップ1: HTML要素を作成するまず、HTM...
MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
MySQL でストアド プロシージャを作成し、データ テーブルに新しいフィールドを追加する方法の分析
この記事では、例を使用して、MySQL でストアド プロシージャを作成し、データ テーブルに新しいフ...
Ubuntuでネットワークルーティングテーブルを表示する方法
Linux におけるルーティングとルーティング テーブルとは何ですか?ルーティングのプロセスとは、ネ...
MYSQL（電話番号、IDカード）データ非感応化の実装
1. データ感度低下の説明日常の開発ニーズでは、データの感度低下が頻繁に発生します。たとえば、ID ...
Ubuntuはカーネルモジュールをコンパイルし、その内容はシステムログに反映されます。
目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...