Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Cara menggunakan regex dalam javascript untuk merealisasikan fungsi hanya memasukkan nombor

Cara menggunakan regex dalam javascript untuk merealisasikan fungsi hanya memasukkan nombor

PHPz
Lepaskan: 2023-04-21 09:32:18
asal
3968 orang telah melayarinya

Apabila melaksanakan pengesahan borang atau pemprosesan data, kita selalunya perlu menggunakan ungkapan biasa untuk menapis atau memformat data input, terutamanya apabila kita perlu memasukkan nombor Penggunaan ungkapan biasa boleh mengelakkan pengguna daripada memasukkan bukan nombor atau ralat. meningkatkan kemantapan dan pengalaman pengguna program. Dalam JavaScript, kami boleh menggunakan ungkapan biasa untuk mengehadkan input pengguna kepada nombor. Artikel ini akan memperkenalkan cara menggunakan ungkapan biasa JavaScript untuk melaksanakan fungsi memasukkan nombor sahaja.

Ungkapan biasa ialah alat pemadanan rentetan yang berkuasa Dengan mentakrifkan peraturan tertentu, anda boleh memadankan rentetan yang sepadan dengan peraturan. Dalam JavaScript, kita boleh menggunakan objek RegExp untuk mencipta ungkapan biasa. Berikut ialah beberapa sintaks asas ungkapan biasa:

  • Kandungan antara dua garis miring ke hadapan mewakili peraturan ungkapan biasa. Sebagai contoh, /123/ bermaksud sepadan dengan jujukan aksara yang ditentukan "123" yang muncul dalam rentetan.
  • "^" mewakili rentetan yang bermula dengan aksara yang ditentukan, contohnya, /^123/ mewakili rentetan yang bermula dengan "123".
  • "$" mewakili rentetan yang berakhir dengan aksara yang ditentukan, contohnya, /123$/ mewakili rentetan yang berakhir dengan "123".
  • "d" bermaksud memadankan aksara angka, bersamaan dengan "[0-9]".
  • "+" bermaksud memadankan aksara sebelumnya satu kali atau lebih. Contohnya, /d+/ sepadan dengan satu atau lebih aksara angka.
  • "{" dan "}" digunakan untuk menentukan julat masa padanan. Contohnya, /d{3,5}/ sepadan dengan 3-5 aksara angka.
  • "|" bermaksud atau, sebagai contoh, /a|b/ bermaksud sepadan dengan aksara "a" atau "b".
  • "()" menunjukkan kumpulan tangkapan, yang boleh digunakan untuk mengekstrak bahagian yang sepadan. Contohnya, /(d{3})-(d{4})/ bermaksud memadankan nombor telefon dan masing-masing menyimpan kod kawasan dan nombor telefon dalam kumpulan tangkapan.
  • "[]" mewakili set aksara dan boleh memadankan mana-mana watak dalam set itu. Contohnya, /[abc]/ sepadan dengan aksara "a", "b", atau "c".

Dengan sintaks asas di atas, kita boleh membina ungkapan biasa untuk merealisasikan fungsi memasukkan nombor sahaja. Berikut ialah contoh:

function isNumber(str) {
  var reg = /^\d+$/;
  return reg.test(str);
}

console.log(isNumber("123")); // true
console.log(isNumber("12a3")); // false
console.log(isNumber("")); // false
Salin selepas log masuk

Kod di atas mentakrifkan fungsi isNumber() untuk menentukan sama ada parameter rentetan yang diluluskan ialah nombor. Fungsi ini menggunakan ungkapan biasa /^d+$/ secara dalaman untuk memadankan rentetan yang mengandungi nombor sahaja. Antaranya:

  • "^" bermaksud permulaan.
  • "d" mewakili aksara angka.
  • "+" bermaksud memadankan aksara sebelumnya satu kali atau lebih.
  • "$" menandakan penamat.

Oleh itu, kandungan yang dipadankan dengan ungkapan biasa di atas ialah: rentetan yang bermula dengan aksara angka, muncul satu kali atau lebih dan berakhir dengan aksara angka. Jika parameter rentetan yang diluluskan memenuhi peraturan padanan ungkapan biasa, ia mengembalikan benar, jika tidak ia mengembalikan palsu.

Dalam aplikasi praktikal, kita boleh menggunakan fungsi di atas untuk pengesahan borang, pemprosesan data dan senario lain untuk menapis dan memformat input data oleh pengguna. Sebagai contoh, contoh berikut melaksanakan komponen borang yang hanya boleh memasukkan nombor melalui rangka kerja jQuery:

<input type="text" class="number-input">
Salin selepas log masuk
$(function() {
  $(".number-input").on("input", function() {
    var value = $(this).val();
    if (!isNumber(value)) {
      $(this).val("");
    }
  });
});
Salin selepas log masuk

Kod di atas melaksanakan komponen kotak teks yang hanya boleh memasukkan nombor melalui rangka kerja jQuery. Apabila pengguna memasukkan aksara yang tidak mematuhi peraturan, kotak teks dikosongkan secara automatik. Antaranya, fungsi on("input") memantau peristiwa input kotak teks, dan fungsi isNumber() digunakan untuk menentukan sama ada kandungan input ialah nombor. Melalui pelaksanaan kod yang mudah, kami boleh mengehadkan input pengguna dengan berkesan dan meningkatkan kebolehpercayaan dan kestabilan borang.

Ringkasnya, ungkapan biasa ialah alat pemadanan rentetan yang sangat berguna yang boleh dibuat dan digunakan dalam JavaScript melalui objek RegExp. Selagi anda menguasai sintaks asas dan peraturan biasa, anda boleh membina pelbagai ungkapan biasa dengan cepat dan melaksanakan pelbagai pemprosesan data dan fungsi penapisan rentetan. Dengan menggunakan ungkapan biasa untuk mengehadkan input nombor sahaja, ketepatan dan kebolehpercayaan data boleh dipertingkatkan dengan berkesan, dan keteguhan serta pengalaman pengguna program boleh dipertingkatkan.

Atas ialah kandungan terperinci Cara menggunakan regex dalam javascript untuk merealisasikan fungsi hanya memasukkan nombor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan