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 のデプロイプロセスの詳細な説明
推薦する
IE6のmin-widthとmin-heightと互換性を持たせる簡単な方法
ウェブサイトがワイドスクリーンの場合、ブラウザ ウィンドウを左右にドラッグすると、ウェブサイトの幅が...
Linux システムのシャットダウンコマンドの違いと使い方の詳細な説明
Linux システムのシャットダウン コマンドは何ですか? Liangxu Tutorial Net...
Expressはログイン認証を実装
この記事では、ログイン認証を実装するためのExpressの具体的なコードを例として紹介します。具体的...
js タグ構文の使用法の詳細
目次1. ラベルステートメントの紹介2. ラベルステートメントの使用序文：日常の開発では、プログラム...
CentOS 8 システム FTP サーバーのインストールとパッシブ モードの設定の詳細なチュートリアル
目次1. 基本を理解する2. システム環境を確認する3. ftpコマンドをインストールする[オプショ...
ブラウザがクロージャをどのように認識するかについて詳しく説明します
目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...
JavaScript でアルゴリズムの複雑さを学ぶ方法
目次概要Big O 表記法とは何ですか?オー(1)の上） （n^2） O(logn) ですの上！）結...
MYSQLでプロシージャの名前を変更する方法の詳細な説明
最近、ストアド プロシージャの名前を変更する機能を使用しました。インターネットで情報を検索しましたが...
WeChatミニプログラムでEchartとサブパッケージを使用するための完全な手順
序文休日は終わっていますが、それは別の形で（お腹に触れることで）私たちに現れます。ミニプログラムでデ...
ローカルの Windows リモート デスクトップから Alibaba Cloud Ubuntu 16.04 サーバーに接続する方法
ローカル Windows リモート デスクトップが Alibaba Cloud Ubuntu 16....
Element PlusはAffixを実装します
目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...
JavaScript配列の組み込みメソッドの詳細な説明
目次1. Array.at() 2. Array.copyWithin() 3. 配列.entrie...
LDAP ユーザー認証を使用するように Linux を構成する方法
私は CentOS に実装された LDAP ユーザー管理を使用しています。これはインターネット上のほ...
vue-router のハッシュモードと履歴モードの違い
vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...
完全なショッピングカートを実装するためのミニプログラム
ミニプログラムは、参考までに完全なショッピングカート[すべて選択/選択解除して金額を計算/加算と減算...