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 のデプロイプロセスの詳細な説明
推薦する
MySQL テーブル名の大文字と小文字の選択
目次1. 大文字と小文字の区別を決定するパラメータ2. パラメータ変更に関する注意事項要約: 1. ...
Linux システムに 3 つ以上の Tomcat をインストールする (詳細な手順)
複数のTomcatをインストールする場合は、システムにJDKがインストールされている必要があり、 T...
vsCodeはワンクリックでvueテンプレートを生成します
1. ショートカットCtrl + Shift + Pを使用してコンソールを呼び出します 2、「スニペ...
Linux CentOS インストール JDK および Tomcat チュートリアル
まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...
コンピュータが予期せずシャットダウンした後、VMware で Linux がインターネットに接続できない問題の解決策
問題の説明: Linux システムのネットワーク カード ファイル /etc/sysconfig/n...
Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する
1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...
docker-compose ポートと expose の違いの詳細な説明
docker-compose でコンテナ ポートを公開する方法は、ports と expose の ...
ウェブサイトを構築するときは、UTF-8 または GB2312 エンコードを使用する必要がありますか?
外国のウェブサイトを開くと文字化けした文字が表示されることが多く、また、英語以外の外国のウェブサイト...
MySQLのconcat関連関数の詳細な説明
1. concat() 関数機能: 複数の文字列を 1 つの文字列に連結する構文: concat(s...
CSS3 Flex エラスティックレイアウトのサンプルコードの詳細な説明
1. 基本概念 //任意のコンテナを Flex レイアウトとして指定できます。 。箱{ ディスプレイ...
Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明
Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...
Vue が 4 レベルのナビゲーションと検証コードを実装する方法の例
効果： まず5つのVueインターフェースを作成する1.home.vueページ <テンプレート&...
Node.jsはMySQLデータベースの実戦記録を追加、削除、変更、チェックします
目次プロジェクトでデータベースを操作する3つのステップデータベースを操作するための具体的な手順1: ...
ウェブデザイン：大量の素材の正確な配置と使用
3回の暗記により、大量の資材の正確な場所と目的を記憶でき、その使いやすさが向上します。 これは単なる...
VUEユニアプリ開発環境についての簡単な説明
目次1. HBuilderXビジュアルインターフェースを通じて2. vue-cliコマンドで実行する...