JavaScriptはパスワードボックスの検証情報を実装します
|
この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例として紹介します。具体的な内容は次のとおりです。
エフェクト表示:
コードショーケース <!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<タイトル></タイトル>
<link rel="スタイルシート" type="text/css" href="fontss2/iconfont.css" rel="外部nofollow" />
<スタイル>
.org{
フォントサイズ: 13px;
色:ディープスカイブルー;
}
。間違っている {
フォントサイズ: 13px;
色: 赤;
}
。右 {
フォントサイズ: 13px;
色: 緑;
}
</スタイル>
</head>
<本文>
<p>
<input type="text"><span class="orginal icon-wenhao iconfont">6～16 桁のパスワードを入力してください</span>
</p>
<スクリプト>
//要素オブジェクトを取得します。var input = document.querySelector('input');
var span = document.querySelector('span');
//フォーカスを失ったイベントを登録する event input.onblur = function() {
入力値の長さが 0 より大きい場合、入力値の長さが 6 より小さい場合、入力値の長さが 16 より大きい場合、
span.className = 'iconfont icon-cuowuguanbiquxiao-xianxingyuankuang が間違っています';
span.innerHTML='入力エラー、6〜16桁のパスワードを入力してください';
}それ以外の場合、入力値の長さ >=6 && 入力値の長さ <=16) {
span.className = 'iconfont icon-yiyanzheng right';
span.innerHTML = '正しく入力してください';
}それ以外 {
span.className = 'オリジナルアイコン-wenhaoアイコンフォント';
span.innerHTML = '6〜16文字のパスワードを入力してください';
}
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: TortoiseSvn Little Turtle インストール 最新の詳細なグラフィックチュートリアル
推薦する
JavaScript 手ぶれ補正のケーススタディ
原理手ぶれ補正の原理は、イベントをトリガーすることはできますが、イベントがトリガーされてから n 秒...
CSS Houdini でダイナミックな波効果を実現
CSS Houdini は、CSS 分野における最もエキサイティングなイノベーションとして知られてい...
MySQL のテーブル内のレコード数を制限する方法
目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...
MySQLデータベースで外部キー制約を使用する必要があるかどうかの詳細な説明
1. はじめに外部キー制約を使用するかどうかという話題は、すでに決まり文句になっています。学校では、...
Nginxがオンになっていると、ポートが占有され、「アドレスは既に使用されています」というメッセージが表示されます。
図に示すように: ポートの使用状況を確認します: sudo netstat -apn | grep ...
Linux における SUID、SGID、SBIT の素晴らしい使い方の詳細な説明
序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...
grpc のリバース プロキシとして nginx を使用する場合の落とし穴の概要
背景ご存知のとおり、nginx は高性能な Web サーバーであり、負荷分散やリバース プロキシによ...
Vue 初心者ガイド: 最初の Vue-cli スキャフォールディング プログラムの作成
1. Vue - 最初の vue-cli プログラムVueの開発はNodeJSに基づいています。実際...
MySQL 構成 SSL マスタースレーブ レプリケーション
MySQL5.6 SSLファイルの作成方法公式ドキュメント: https://dev.mysql.c...
Dockerコンテナでの静的ウェブサイトレイアウトの実装
サーバーの配置数日間無料で使用できるクラウドサーバー（Alibaba Cloud、Huawei Cl...
jQuery ステップ進行軸プラグインの実装コード
毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...
iframeノードの初期化の問題に関する議論
今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれ...
HTML における要素の水平および垂直中央揃えに関する議論
ページをデザインするときには、ログイン ウィンドウを中央に配置するなど、DIV を中央に配置し、ペー...
Linux システム修復モード (シングル ユーザー モード)
目次序文1. シングルユーザーモードでの一般的なバグ修正2. シングルユーザーモードでシステムパスワ...
Dockerを使用してコンテナリソースを制限する方法
覗き見の問題サーバーでは、IIS サービスが複数のサイトを展開していると仮定すると、サイトの 1 つ...