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 インストール 最新の詳細なグラフィックチュートリアル
推薦する
CSS で左上の三角形を作成するいくつかの方法の詳細な説明
今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図（幅と高さを60p...
HTML コメント HTML 内のテキストコメントをマークするための記号
HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...
システム エラー 1067 のため、MySQL 5.6 解凍バージョン サービスを開始できません
今日午後ずっと私を悩ませたバグを記録する半月前から始めましょう。それから.................
nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します
前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...
MySQL 高可用性クラスタの展開とフェイルオーバーの実装
目次1. 内閣府1. コンセプト2. MHAの構成3. MHAの特徴2. MySQL+MHAをビルド...
MySQLのイベントスケジューラEVENTを理解する
MySQL のイベント スケジューラ EVENT は、Unix crontab や Windows ...
MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有
問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...
IE9 のネイティブ ページ互換性の問題に対する解決策についての簡単な説明
序文最近、クライアントのネイティブページを引き継ぎました。顧客は、ページが IE9 以降のバージョン...
Vue2.x の応答性の簡単な説明と例
1. Vue レスポンシブの使用法を確認する Vue の応答性は、私たち全員がよく知っています。 ...
CSS導入方法4つのまとめ（共有）
1. インライン参照：ラベルに直接使用されるが、メンテナンスコストが高い スタイル='フォ...
JavaScriptは行削除機能を備えたテーブルを動的に生成します
この記事の例では、テーブルを動的に生成したり行を削除したりするためのJavaScriptの具体的なコ...
IDEA を使用して Tomcat を設定し、JSP ファイルを作成する方法
idea を使用して JSP ファイルを書き込む前に、jdk 環境 (ここでは説明しません) と対応...
ソースコードから MySQL 8.0.20 をコンパイルしてインストールする詳細なチュートリアル
前回の記事では、次のことを紹介しました。 MySQL8.0.20 インストール チュートリアルとイン...
Mybatis+mysqlはストアドプロシージャを使用してシリアル番号実装コードを生成します。
同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...
MYSQL 文字関数を使用してデータをフィルタリングすることに関する質問
問題の説明:構造：テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...