JavaScript melaksanakan penapisan automatik dan mengira nombor telefon bimbit dalam bidang teks bentuk

Artikel ini memperincikan cara menapis dan mengekalkan nombor telefon bimbit yang memenuhi format tertentu (seperti 10 digit) dalam masa nyata dalam medan teks borang web, dan mengemas kini jumlah nombor secara dinamik. Mendengarkan input pengguna dan acara penampakan melalui JavaScript, digabungkan dengan ekspresi biasa untuk pengesahan dan pembersihan nombor, menyediakan penyelesaian front-end yang cekap dan mesra pengguna, mengelakkan penapisan penapisan manual dan memastikan ketepatan format data.

Dalam senario di mana pengguna mengikat input atau tampal nombor telefon bimbit melalui medan teks, ia sering diperlukan untuk memformat nombor yang dimasukkan, seperti mengekalkan nombor angka tulen dengan nombor tertentu dan mengira bilangan nombor yang sah dalam masa nyata. Ini bukan sahaja meningkatkan pengalaman pengguna, tetapi juga pada mulanya memastikan ketepatan data. Artikel ini akan memberikan penyelesaian berdasarkan HTML dan JavaScript untuk merealisasikan penapisan automatik dan menghitung nombor telefon bimbit dalam medan teks.

1. Pembinaan Struktur HTML

Pertama, kita memerlukan struktur borang HTML yang mengandungi medan teks dan kotak input yang memaparkan nombor nombor.

Nombor mudah alih

Jumlah nombor

hantar

Dalam struktur ini:

• Mobileno adalah medan teks yang digunakan untuk memasukkan nombor telefon bimbit.
• NumberCount adalah kotak input baca sahaja yang memaparkan bilangan nombor telefon bimbit yang sah.

2. JavaScript melaksanakan nombor penapisan dan pengiraan

Logik teras terletak pada JavaScript. Kami akan mendengar peristiwa input dalam medan teks, dan melakukan penapisan dan pengiraan operasi dengan segera apabila pengguna memasuki atau memasangkan kandungan.

 <script>
    document.addeventListener (&#39;domContentLoaded&#39;, function () {
        const mobilenumberStextArea = document.QuerySelector (&#39;#mobileno&#39;);
        const numberCountInput = document.QuerySelector (&#39;#numberCount&#39;);

        /**
         * Proses Kandungan Medan Teks, Tapis 10 Nombor Numerik Tulen dan Kemas kini Kira*/
        Fungsi ProcessMobileNumbers () {
            Biarkan RawInput = MobileNumberStextArea.Value;
            // Split by line dan menapis garis kosong biarkan garis = rawInput.split (&#39;\ n&#39;). Map (line => line.trim ()). Penapis (line => line! == &#39;&#39;);

            biarkan validNumbers = [];
            const tendigitnumberregex = /^\ d {10} $ /; // Padankan baris nombor 10 digit yang tepat.Foreach (num => {
                jika (tendigitnumberRegex.test (num)) {
                    validNumbers.push (num);
                }
            });

            // Keluarkan nombor pendua yang sah (pilihan, tetapi disyorkan)
            const uniquevalidNumbers = [... set baru (validNumbers)];

            // Kemas kini Kandungan Medan Teks, hanya nombor yang sah dikekalkan, satu mobileNumberStextArea.Value = uniquevalidnumbers.join (&#39;\ n&#39;);
            // Kemas kini nombor kiraan NumberCountInput.Value = uniquevalidnumbers.length;
        }

        // Dengar peristiwa input untuk merealisasikan pemprosesan masa nyata // Acara input akan mencetuskan mobilenumberStextarea.addeventListener (&#39;input&#39;, ProcessMobilenumbers);

        // Jalankan sekali apabila halaman dimuatkan untuk memproses kandungan awal (jika medan teks mempunyai nilai pratetap)
        ProcessMobilenumbers ();
    });
</script>

3. Penjelasan terperinci mengenai logik teras

1. Pengambilalihan Elemen DOM : Pertama, rujukan DOM ke medan teks (#Mobileno) dan Kotak Input Count (#NumberCount) diperoleh melalui Document.QuerySelector.
2. ProcessMobileNumbers Fungsi : Ini adalah fungsi pemprosesan teras, yang bertanggungjawab untuk tugas -tugas berikut:
   • Dapatkan Input Asal : MobilenumberStextArea.Value Dapatkan kandungan semasa medan teks.
   • Split and Clean by Line : RawInput.Split ('\ n') memecah kandungan ke dalam array dengan rehat garis. peta (line => line.trim ()) menghilangkan ruang permulaan dan akhir pada setiap baris. penapis (line => line! == '') Mengeluarkan garis kosong yang diproses.
   • Pengesahan Ekspresi Biasa : Const TendigitNumberRegex = /^\ d {10} $ /; mentakrifkan ungkapan biasa.
     • ^ Padankan permulaan rentetan.
     • \ D Padankan mana-mana nombor (0-9).
     • {10} Tepat sepadan dengan elemen sebelumnya 10 kali.
     • $ sepadan dengan akhir rentetan. Ekspresi biasa ini memastikan bahawa nombor mestilah dan hanya 10 digit dan tidak mengandungi watak lain (seperti ruang, ditambah tanda, dll.).
   • Penapis Nombor yang sah : Traverse setiap baris dan gunakan TendigitNumberRegex.test (NUM) untuk memeriksa sama ada baris memenuhi format 10 digit. Nombor yang memenuhi kriteria ditambah kepada array ValidNumbers.
   • Pemprosesan Deduplication (disyorkan) : [... set baru (ValidNumbers)] adalah sintaks JavaScript ringkas untuk membuat array baru yang mengandungi semua elemen bukan duplikasi dalam array ValidNumbers. Ini boleh mengelakkan tuduhan berulang apabila pengguna memaparkan nombor pendua.
   • Kemas kini Medan Teks : MobileNumberStextArea.Value = uniquevalidnumbers.join ('\ n'); Sambungkan nombor yang sah selepas penapisan dan deduplikasi dengan rehat garis, dan tetapkan semula medan teks, dengan itu secara automatik membersihkan nombor yang tidak sesuai dengan format.
   • Kiraan kemas kini : numberCountInput.Value = uniquevalidnumbers.length; Kemas kini panjang array nombor yang sah ke kotak input Count.
3. Mendengarkan acara : MobileNumberStextArea.AddeventListener ('Input', ProcessMobilenumbers); Mengikat fungsi ProcessMobilenumbers ke acara input dalam medan teks. Ini bermakna apabila kandungan medan teks berubah (sama ada pengguna menaip, memadam, atau menampal), fungsi itu dilaksanakan dengan segera, membolehkan maklum balas masa nyata.
4. Pemprosesan Inisialisasi : ProcessMobilenumbers (); Melaksanakan sekali sejurus selepas halaman dimuatkan, sekiranya medan teks mempunyai nilai preset dalam HTML, memastikan pengiraan dan pembersihan keadaan awal yang betul.

4. Langkah berjaga -jaga dan pengoptimuman

• Pemilihan Acara :
  • Acara input adalah pilihan terbaik untuk mengendalikan perubahan dalam kandungan domain teks. Ia meliputi pelbagai cara untuk menukar kandungan seperti input pengguna, tampal, memotong, menyeret dan menjatuhkan, dan menyediakan pengalaman pengguna masa nyata.
  • Acara Keyup hanya dicetuskan apabila kunci dikeluarkan dan operasi bukan papan kekunci seperti penampakan tidak dapat ditangkap.
  • Acara Mouseout (seperti yang ditunjukkan dalam jawapan asal kepada soalan) dicetuskan apabila tetikus dipindahkan dari elemen, yang boleh membawa kepada pengalaman pengguna yang lemah kerana pengguna perlu memindahkan tetikus dari medan teks untuk melihat hasilnya dan tidak disyorkan.
  • Acara tampal boleh dikendalikan secara khusus untuk operasi tampal, tetapi biasanya peristiwa input mencukupi.
• Ungkapan biasa : ^\ d {10} $ adalah perlawanan numerik tulen 10-bit yang sangat tepat. Jika anda perlu menyokong kod domain antarabangsa atau format nombor telefon bimbit yang lebih kompleks, anda perlu menyesuaikan ungkapan biasa. Sebagai contoh, jika anda membenarkan untuk memulakan dengan nombor, diikuti dengan nombor, anda memerlukan peraturan yang lebih kompleks.
• Pengalaman Pengguna : Pembersihan dan pengiraan masa nyata dapat meningkatkan pengalaman pengguna dengan ketara. Pengguna boleh melihat nombor mana yang sah dan yang telah dikeluarkan.
• Pengesahan sisi pelayan : Walaupun pengesahan front-end menyediakan pengalaman pengguna yang baik, pastikan anda mengesahkan lagi di sisi pelayan . Pengesahan front-end mudah dilangkau, dan pengesahan sisi pelayan adalah garis pertahanan terakhir untuk keselamatan data dan integriti.
• Petua Ralat : Dalam aplikasi yang lebih kompleks, anda boleh mempertimbangkan memberikan maklum balas visual atau meminta kepada pengguna apabila nombor tidak sah dikeluarkan, menunjukkan nombor mana yang tidak memenuhi keperluan.

Melalui kaedah di atas, kami dapat mengurus dan mengesahkan nombor telefon bimbit yang dimasukkan oleh pengguna dalam medan teks, memastikan ketepatan data, dan meningkatkan pengalaman pengguna secara keseluruhan.

Atas ialah kandungan terperinci JavaScript melaksanakan penapisan automatik dan mengira nombor telefon bimbit dalam bidang teks bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!