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 のデプロイプロセスの詳細な説明
推薦する
JavaScript で簡単な計算機を実装する
この記事の例では、参考までに簡単な計算機を実装するためのJavaScriptの具体的なコードを共有し...
Vue2.x および Vue3.x のカスタム命令の使用方法とフック関数の原理を理解する
目次Vue2.x の使用法グローバル登録部分登録使用フック機能フック関数のパラメータVue3.x の...
MySQL最新バージョン8.0.17解凍版インストールチュートリアル
個人的にはインストール版よりも解凍版の方がインストールしやすいと思います。早速、解凍版のインストール...
vue フロントエンド HbuliderEslint リアルタイム検証 自動修復設定
目次HBuilderX での ESLint プラグインのインストールカスタム eslint-js ル...
エンタープライズプロダクション MySQL 最適化入門
Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...
CSS を使用して三角形を実装する一般的な手法 (複数の方法)
面接の経験によっては、CSS に関する質問がよく見られ、CSS を使用して三角形を描画する方法につい...
Dockerコンテナを作成、起動、停止する方法
1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...
mysql の追加、削除、変更、クエリの基本ステートメント
文法以下は、MySQL テーブルにデータを挿入するための INSERT INTO コマンドの一般的な...
Vueフロントエンドの効率的な開発のためのレンダリング手順をリストします
v-for ディレクティブリストといえば、ループについても触れなければなりません。v-for 命令は...
MySQL インデックスの知識の要約
MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...
Vueのプラグインの仕組みとインストールの詳細を深く理解する
序文： Vue を使用する場合、多くの場合、カスタム プラグインをいくつか使用して記述し、 Vue....
アプレットにおけるwx.getUserProfileインターフェースの具体的な使用
最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...
Vue+elementuiはドロップダウンテーブルの複数選択と検索機能を実現します
この記事では、ドロップダウンテーブルの複数選択と検索を実現するためのvue+elementuiの具体...
JavaScript ベースで年・月・日の 3 階層連携を実現
この記事では、年、月、日の3段階のリンクを実現するためのJavaScriptの具体的なコードを参考ま...
MySQL マスタースレーブレプリケーション切断の一般的な修復方法
目次01 問題の説明02 ソリューション1. 他のスレーブライブラリを見つけてすぐに置き換える2. ...