この記事の例では、ユーザー登録インターフェース機能を実装するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 1.cssコード *{ マージン: 0; パディング: 0; } 。ブロック{ 位置: 相対的; マージン: 0 自動; 上マージン: 80px; 幅: 710ピクセル; 高さ: 500px; 境界線: 1px実線 rgba(29, 29, 29, 0.64); 背景: url("./img/logo2396.jpg")繰り返しなし; 背景サイズ: 100%; } 。写真 { 位置: 絶対; zインデックス: 1; 幅: 710ピクセル; 高さ: 500px; 背景色: rgba(0, 0, 0, 0.71); } .biao{ 上マージン: 20px; 位置: 絶対; zインデックス: 2; 左マージン: 150px; } li{ 位置: 相対的; パディング左:20px; リストスタイル: なし; 行の高さ: 70px; 幅: 400ピクセル; 境界線: 1px 白の実線; マージン:5px 自動; } li 入力[タイプ=テキスト]{ 左パディング: 20px; 境界線スタイル: なし; 背景: なし; } 入力[type=submit]{ 左マージン: 150px; 境界線スタイル: なし; フォントサイズ: 25px; 色: 白; 背景: なし; } .d{ 背景色: rgba(222, 53, 3, 0.71); } 。TXT{ 行の高さ: 50px; 幅: 280ピクセル; フォントサイズ: 15px; 色: 白; } 。エラー { 位置: 絶対; zインデックス: 2; 左: 150px; 色: rgba(253, 253, 253, 0.4); フォントサイズ: 14px; } 2.htmlコード <div class="block"> <div class="写真"></div> <div class="biao"> <フォーム名="フォーム"> <ul> <li><label style="color: white">口座番号:</label><input class="txt" type="text"></li> <li><label style="color: white">パスワード:</label><input class="txt" type="text"></li> <li><label style="color: white">パスワードの確認:</label><input class="txt" type="text"></li> <li><label style="color: white">電話番号:</label><input class="txt" type="text"></li> <li><label style="color: white">メールボックス:</label><input class="txt" type="text"></li> <li class="d"><input id="sub" type="submit" value="登録"></li> </ul> </フォーム> </div> </div> 3.jsコード var sub=document.getElementById("sub"); var txt = document.getElementsByClassName("txt"); タグ名によって要素を取得します。 document.forms.form.onsubmit=関数(){ ヤン(); var errl = document.getElementsByClassName("error").length; if(!errl){ true を返します。 } false を返します。 }; 関数ヤン(){ for(var i=0;i<txt.length;i++){ txt[i].focus(); } サブフォーカス(); } (var i=0;i<txt.length;i++) の場合 { txt[i].index=i; txt[i].onfocus=関数(){ this.parentElement.children[2]==undefinedの場合、戻り値: this.parentElement.children[2]を削除します。 }; txt[i].onblur=関数(){ スイッチ(this.index) { ケース0: if(this.value==""){ var s = document.createElement("span"); s.innerHTML="口座番号を入力してください"; s.className="エラー"; li[this.index].appendChild(s) } それ以外{ var s = document.createElement("span"); s.innerHTML=""; s.className="成功"; li[this.index].appendChild(s) } 壊す; ケース1: if(this.value==""){ var s = document.createElement("span"); s.innerHTML="パスワードを入力してください"; s.className="エラー"; li[this.index].appendChild(s) } そうでない場合(この値の長さ<6||この値の長さ>11) { var s = document.createElement("span"); s.innerHTML="パスワードが間違っています"; s.className="エラー"; li[this.index].appendChild(s); txt[this.index].value=""; } それ以外{ var s = document.createElement("span"); s.innerHTML=""; s.className="成功"; li[this.index].appendChild(s) } 壊す; ケース2: if(this.value==""){ var s = document.createElement("span"); s.innerHTML="パスワードをもう一度確認してください"; s.className="エラー"; li[this.index].appendChild(s); txt[this.index].value=""; } そうでない場合(this.value!=txt[1].value){ var s = document.createElement("span"); s.innerHTML="再入力してください"; s.className="エラー"; li[this.index].appendChild(s); txt[this.index].value=""; } それ以外{ var s = document.createElement("span"); s.innerHTML=""; s.className="成功"; li[this.index].appendChild(s) } 壊す; ケース3: if(this.value==""){ var s = document.createElement("span"); s.innerHTML="数字を入力してください"; s.className="エラー"; li[this.index].appendChild(s) } そうでない場合(this.value.length!=11){ var s = document.createElement("span"); s.innerHTML="数値の形式が間違っています"; s.className="エラー"; li[this.index].appendChild(s) txt[this.index].value=""; } それ以外{ var s = document.createElement("span"); s.innerHTML=""; s.className="成功"; li[this.index].appendChild(s) } 壊す; ケース4: if(this.value==""){ var s = document.createElement("span"); s.innerHTML="メールアドレスを入力してください"; s.className="エラー"; li[this.index].appendChild(s) } それ以外{ var s = document.createElement("span"); s.innerHTML=""; s.className="成功"; li[this.index].appendChild(s) } 壊す; } } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux インストール Redis 実装プロセスとエラー解決
>>: MySQLの一般的なバックアップコマンドとシェルバックアップスクリプトの共有
この記事の例は MySQL 5.0 以降で実行されます。ユーザー権限を付与するための MySQL コ...
この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...
この記事では、パズル効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的...
目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...
背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...
テーブルデータを作成する テーブル `praise_info` を作成します ( `id` bigi...
この記事では、MySQL で 2 つのテーブルを関連付ける結合テーブルにインデックスを作成する方法を...
7 のMicrosoft の公式 Web サイトから HTTP Rewrite モジュールをダウンロ...
プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...
非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...
ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...
この記事の例では、ライトスイッチ効果を実現するためのjsの具体的なコードを参考までに共有しています。...
目次序文1. SCPの使用法2. sftpを使用する3. scp と sftp の違いは何ですか?ど...
1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...
この記事の例では、アップロード画像コントロールを実装するためのjsの具体的なコードを参考までに共有し...