Paparan dinamik butang Padam Akaun mengikut e -mel input pengguna

Tutorial ini bertujuan untuk membimbing pemaju bagaimana menggunakan jQuery untuk melaksanakan fungsi interaksi antara muka pengguna: butang "Padam Akaun" hanya dipaparkan apabila pengguna memasuki alamat e -mel yang betul dalam kotak input yang ditentukan. Kami akan menerangkan secara terperinci bagaimana untuk mendapatkan alamat e -mel pratetap, dengar peristiwa input dalam kotak input, dan secara dinamik mengawal paparan dan menyembunyikan butang mengikut kandungan input. Melalui tutorial ini, anda akan menguasai kemahiran praktikal untuk mengawal secara dinamik paparan elemen halaman berdasarkan input pengguna.

Prinsip pelaksanaan

Idea teras adalah:

1. Dapatkan Peti Mel Preset: Dapatkan nilai atribut letaknya dari kotak input peti mel baca sahaja sebagai peti mel preset pengguna.
2. Dengarkan Acara Input: Dengar peristiwa input kotak input yang digunakan untuk memasukkan peti mel, yang dicetuskan setiap kali kandungan kotak input berubah.
3. Bandingkan peti mel: Bandingkan nilai semasa kotak input dengan peti mel pratetap.
4. Butang Dynamic Show/Hide: Jika nilai input konsisten dengan peti mel pratetap, keluarkan kelas tersembunyi butang Padam Akaun untuk dipaparkan; Jika tidak, tambahkan kelas tersembunyi untuk menyembunyikannya.

Pelaksanaan kod

Berikut adalah contoh kod HTML, CSS, dan JavaScript yang lengkap:

Html:

 <input type="text" disabled placeholder="[e-mel dilindungi]" name="emp_email" class="form-control">

<input jenis="teks" placeholder="Jika anda ingin memadam akaun anda sila masukkan e-mel anda" nilai="" name="e-mel_pass" class="form-control-e-mel-delete">

<input type="Button" value="Delete Account?" class="btn btn-custom del_acount hide_del_button">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

Dalam struktur HTML ini:

• Elemen input pertama hanya dibaca dan digunakan untuk memaparkan alamat e-mel pratetap pengguna. Hartanah pemegang tempat mengandungi alamat e -mel.
• Elemen input kedua adalah sesuatu yang pengguna boleh masukkan dan digunakan untuk memasukkan alamat e -mel untuk mengesahkan identiti.
• Elemen input ketiga ialah butang "Padam Akaun", yang disembunyikan oleh kelas Hide_Del_Button dalam keadaan awal.

CSS:

 .HIDE_DEL_BUTTON {
  Paparan: Tiada;
}

Peraturan CSS ini mentakrifkan kelas Hideo_DEL_BUTTON, yang digunakan untuk menyembunyikan unsur -unsur.

JavaScript (jQuery):

 $ (dokumen) .ready (fungsi () {
  var user_email = $ ('input [name = "emp_email"]'). attr ('placeholder');

  $ (". E-mel-pass-delete"). ("input", fungsi () {
    var current_email = $ ('. e-mel-pass-delete'). val ();

    jika (user_email == current_email) {
      $ (". del_acount"). penyingkiran ("hide_del_button");
    } else {
      $ (". del_acount"). AddClass ("Hide_Del_Button");
    }
  });
});

Kod JavaScript ini menggunakan jQuery:

1. $ (dokumen) .ready (fungsi () {...});: Pastikan untuk melaksanakan kod selepas dokumen dimuatkan.
2. var user_email = $ ('input [name = "emp_email"]'). attr ('placeholder');: Dapatkan nilai atribut tempat pemegang letak kotak input peti mel baca sahaja dan simpannya dalam pembolehubah user_email.
3. $ (". E-mel-pass-delete"). ("input", fungsi () {...});: mengikat pendengar acara input untuk kotak input peti mel.
4. var current_email = $ ('. e-mel-pass-delete'). val ();: Dapatkan nilai semasa kotak input peti mel.
5. jika (user_email == current_email) {...} else {...}: Bandingkan user_email dan current_email. Jika sama, keluarkan kelas Hideo_DEL_BUTTON elemen del_acount untuk memaparkannya; Jika tidak, tambahkan kelas Hideo_DEL_BUTTON untuk menyembunyikannya.

Perkara yang perlu diperhatikan

• Keselamatan: Kaedah ini hanyalah pengesahan depan yang mudah dan tidak dapat menjamin keselamatan sepenuhnya. Backend mesti menjalani pengesahan dan kebenaran yang ketat untuk melaksanakan operasi memadam akaun.
• Pengalaman Pengguna: Anda boleh menambah beberapa maklumat segera, seperti "Sila masukkan alamat e -mel anda untuk memadam akaun anda" di bawah kotak input untuk membimbing pengguna.
• Pengendalian ralat: Memandangkan keadaan di mana pengguna memasuki alamat e -mel yang salah, anda boleh menambah maklumat segera ralat.
• Pengesahan Format E -mel: Anda boleh menambah pengesahan format e -mel mudah ke bahagian depan, seperti menggunakan ungkapan biasa untuk meningkatkan pengalaman pengguna.

Meringkaskan

Melalui tutorial ini, anda belajar bagaimana menggunakan jQuery untuk mendengar peristiwa input dalam kotak input dan secara dinamik mengawal paparan dan bersembunyi elemen halaman berdasarkan kandungan input. Teknologi ini boleh digunakan untuk pelbagai senario interaksi antara muka pengguna, seperti paparan dinamik medan borang, memaparkan kandungan yang berbeza mengikut pemilihan pengguna, dan lain-lain. Ingat, pengesahan front-end hanyalah cara tambahan, dan pengesahan keselamatan back-end adalah kunci.

Atas ialah kandungan terperinci Paparan dinamik butang Padam Akaun mengikut e -mel input pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!