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 インストール 最新の詳細なグラフィックチュートリアル
推薦する
フィールドの文字セットの違いによる MySQL のインデックス失敗の解決策
インデックスとは何ですか?なぜインデックスを作成するのですか?インデックスは、列に特定の値を持つ行を...
MySQLのLIMIT文について詳しく説明します
目次質問サーバー層とストレージエンジン層LIMITって何ですか？何をするか？トゥカオ最近、Q&...
MySQL InnoDBとMyISAMの違いを簡単に理解する
序文MySQL は、myisam、innodb、memory、archive、example など、...
Vueは下部のポップアップウィンドウで複数選択を実装します
この記事の例では、下部のポップアップウィンドウで複数選択を実装するためのVueの具体的なコードを共有...
Linux ファイルシステムの説明: ext4 以降
今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...
CentOS 7 環境でソースコードから MySQL 5.7 をインストールする方法
この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...
2012年のベストWebデザイン作品レビュー[パート1]
新年の初めに、友人の健康と2013年が素晴らしい年となることを心からお祈りいたします。この記事では、...
Vue で echarts を使用してコンポーネントを視覚化する方法
echarts コンポーネントの公式ウェブサイト アドレス: https://echarts.apa...
ウェブサイトでページコンテンツや情報を直接コピーできない問題を解決する方法
最近では、多くのウェブサイトでは、ページ上の特定のコンテンツや情報を直接コピーすることは許可されてお...
HTML ヘッドタグの詳細な紹介
HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...
CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス
セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...
Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法
序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...
VMwareのCentosシステムでNavicatがMySQLサーバーに接続できない問題を解決します
ホスト 'xxxx' はこの MySQL サーバーに接続できませんエラー: 1130...
CSS で放射状グラデーションを使用してカード効果を実現する
数日前、同僚がポイントモールプロジェクトを受け取りました。このプロジェクトには、カードやクーポンをギ...
Jenkinsを使用してプロジェクトを別のホストにデプロイするプロセス
環境ホスト名IPアドレス仕えるジェンキンス192.168.216.200トムキャット、ジェンキンスサ...