この記事では、パスワードボックスの検証情報を実装するための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 インストール 最新の詳細なグラフィックチュートリアル
原理手ぶれ補正の原理は、イベントをトリガーすることはできますが、イベントがトリガーされてから n 秒...
CSS Houdini は、CSS 分野における最もエキサイティングなイノベーションとして知られてい...
目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...
1. はじめに外部キー制約を使用するかどうかという話題は、すでに決まり文句になっています。学校では、...
図に示すように: ポートの使用状況を確認します: sudo netstat -apn | grep ...
序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...
背景ご存知のとおり、nginx は高性能な Web サーバーであり、負荷分散やリバース プロキシによ...
1. Vue - 最初の vue-cli プログラムVueの開発はNodeJSに基づいています。実際...
MySQL5.6 SSLファイルの作成方法公式ドキュメント: https://dev.mysql.c...
サーバーの配置数日間無料で使用できるクラウドサーバー(Alibaba Cloud、Huawei Cl...
毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...
今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれ...
ページをデザインするときには、ログイン ウィンドウを中央に配置するなど、DIV を中央に配置し、ペー...
目次序文1. シングルユーザーモードでの一般的なバグ修正2. シングルユーザーモードでシステムパスワ...
覗き見の問題サーバーでは、IIS サービスが複数のサイトを展開していると仮定すると、サイトの 1 つ...