JavaScript ベースのパスワード ボックス検証情報の実装
|
この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例として紹介します。具体的な内容は次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<スタイル>
div {
幅: 600ピクセル;
マージン: 100px 自動;
}
。メッセージ {
表示: インラインブロック;
フォントサイズ: 12px;
色: #999;
背景: url(./img/1.png) 繰り返しなし 左中央;
左パディング: 10px;
}
。間違っている {
色: 赤;
背景画像: url(img/2.png);
}
。右 {
色: 緑;
背景画像: url(img/3.png);
}
</スタイル>
</head>
<本文>
<div class="register">
<input type="password" class="ipt">
<p class="message">6～16 桁のパスワードを入力してください</p>
</div>
<スクリプト>
//要素を取得します var ipt = document.querySelector('.ipt');
var メッセージ = document.querySelector('.message');
//イベントを登録 ipt.onblur = function() {
//フォームの長さに応じて valueif (this.value.length < 6 || this.value.length > 16) {
message.className = 'メッセージが間違っています';
message.innerHTML = '入力した桁数が正しくありません';
} それ以外 {
message.className = 'メッセージ権利';
message.innerHTML = '正しく入力してください';
}
}
</スクリプト>
</本文>
</html>運用結果
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker Alibaba Cloud RocketMQ 4.5.1 のデプロイプロセスの詳細な説明
推薦する
Vueは単純なランダムロールコールを実行します
目次レイアウト部分: <div id="アプリ"> <p>...
MySQLインスタンスクラッシュ事例の詳細な分析
[問題の説明]私たちの実稼働環境には、複数の MySQL サーバー (MySQL 5.6.21) の...
Dockerとイメージの操作方法
ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...
js で 0ms 遅延タイマーを実装するいくつかの方法
目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...
Dockerを使用してシンプルなJava開発およびコンパイル環境を構築する方法の詳細な説明
Java 言語には多くのバージョンがあります。一般的に使用されている Java 8 に加えて、一部の...
IDEA2021 tomcat10 サーブレットの新しいバージョンの落とし穴
私が学習していたときに使用していたバージョンは比較的新しいものであり、インターネット上のチュートリア...
HTML+JS に基づくシンプルな年齢計算ツールの実装
目次序文デモンストレーション効果HTMLコードCSSコードJavascriptコードデモアドレス序文...
動的テーブルを実装するための要素サンプルコード
目次【コード背景】 【コード実装】 #1# -> コード再利用の基本は、再利用可能なコンポーネ...
MYSQL は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード
序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...
HTML タグ dl dt dd 使用方法
基本構造:コードをコピーコードは次のとおりです。 <ダウンロード> <dt>...
MySQL データベースのエンコーディングを utf8mb4 に変更する方法
utf8mb4 エンコーディングは utf8 エンコーディングのスーパーセットであり、utf8 と互...
Linuxの運用と保守の基本プロセス管理と環境構成分析
目次1. プロセスの基本的な概要2. プロセスの構成要素3. プロセス環境4. プロセスステータス5...
MySQLでTEXT/BLOB型を使用する際の注意点を詳しく説明します
1. TEXTとBLOBの違いTEXT ファミリと BLOB ファミリの唯一の違いは、BLOB 型は...
HTML（CSSスタイル仕様）を読む必要があります
CSS スタイル仕様1. クラスセレクター2. タグセレクター3. IDセレクター4. CSSスタイ...
MySQL 5.7.19 インストールディレクトリに my.ini ファイルを作成する方法
前回の記事では、MySQL 5.7.19 無償インストール版 (64 ビット) の設定方法についての...