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 のデプロイプロセスの詳細な説明
推薦する
ファイルのアップロードの進行状況を示す React の例
目次React アップロードファイル表示の進行状況デモフロントエンドにReactアプリケーションを素...
MySQL 5.7.25 のインストールと設定方法のグラフィックチュートリアル
MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...
MySQLメモリストレージエンジンに関する知識
メモリストレージエンジンに関する知識ポイントメモリ ストレージ エンジンは日常業務ではほとんど使用さ...
HTML でスタイルを使用して属性を追加する例
必要なリンクにインライン スタイルを追加します。コードをコピーコードは次のとおりです。 <a ...
docker で PostgreSQL データベースをインストールして永続化する方法
Dockerのインストール手順をスキップする1. postgresqlイメージを取得する docke...
MySQL 結合クエリの原則の知識ポイント
MySQL 結合クエリ1. 基本概念2 つのテーブルの各行をペアで水平に接続して、すべての行の結果を...
Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド
この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...
Eclipseを使用してMySQLデータベースに接続する方法を説明します
序文常にエラーが発生するため、MySQL データベースに接続するプロセスを記録します。接続プロセス1...
Linux で誤って削除したメッセージ ファイルを復元する方法
プロセスで使用されていて、誤って削除されたファイルがある場合、それらを回復することができます。プロセ...
MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル
最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...
Centos7.4 システムに yum ソースから mysql 5.6 をインストールする
システム環境: centos7.4 1. データベースがインストールされているかどうかを確認します。...
mysql を解決: エラー 1045 (28000): ユーザー 'root'@'localhost' のアクセスが拒否されました (パスワードの使用: NO/YES)
1. 問題時々Mysqlにログインしてパスワードを入力すると、この状況が発生しますmysql -u...
React Fiberの仕組みの詳細な説明
目次React Fiberとは何ですか?なぜReact Fiberなのか? React Fiberは...
MacでのMySQL初期化パスワード操作
Macでデータベースを操作する際に個人が遭遇するデータベース起動の問題の簡単な記録1. Apple-...
一般的なテーブルコンポーネントの Vue カプセル化の完全な手順記録
目次序文テーブル コンポーネントをカプセル化する必要があるのはなぜですか?ステップ1: 共通コンポー...