Rumah >hujung hadapan web >tutorial js >Pengesahan jQuery: hadkan input kepada nombor dan titik perpuluhan
Pengesahan jQuery: hadkan input kepada nombor dan titik perpuluhan
- 王林asal
- 2024-02-24 11:33:301194semak imbas
Pengesahan jQuery: Hanya nombor dan titik perpuluhan dibenarkan untuk dimasukkan pengguna hanya memasukkan nombor dan titik perpuluhan. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencapai fungsi ini dan menyediakan contoh kod khusus.
Analisis Keperluan
Semasa proses pembangunan, kadangkala pengguna dikehendaki memasukkan nombor dan titik perpuluhan sahaja, seperti kotak input amaun, kotak input kuantiti, dsb. Untuk memastikan ketepatan data dan penyeragaman format, kami perlu mengehadkan input pengguna.
Penyelesaian
Kami boleh menggunakan jQuery digabungkan dengan ungkapan biasa untuk mengehadkan input pengguna. Pertama, kita perlu menentukan sama ada aksara yang dimasukkan oleh pengguna memenuhi keperluan dalam acara penekan kekunci kotak input Jika mereka tidak memenuhi keperluan, sekat acara lalai. Kemudian, sekiranya kotak input kabur, kami boleh memproses kandungan yang dimasukkan oleh pengguna untuk memastikan kandungan input memenuhi keperluan.
Contoh kod khusus
Berikut ialah kod contoh mudah yang melaksanakan sekatan bahawa hanya nombor dan titik perpuluhan dibenarkan untuk dimasukkan dalam kotak input:
<!DOCTYPE html>
<html>
<head>
<title>Pengesahan jQuery: hadkan input kepada nombor dan titik perpuluhan</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="numberInput" placeholder="只能输入数字和小数点">
<script>
$(document).ready(function(){
$('#numberInput').keypress(function(event){
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
event.preventDefault();
} else {
return true;
}
});
$('#numberInput').blur(function(){
var inputValue = $(this).val();
var newValue = inputValue.replace(/[^0-9.]/g, '');
$(this).val(newValue);
});
});
</script>
</body>
</html>Dalam kod ini, kami mula-mula memperkenalkan perpustakaan jQuery dan mencipta Kotak input, id ialah numberInput. Dalam acara sedia, kami memantau peristiwa penekan kekunci kotak input untuk menentukan sama ada kandungan input memenuhi keperluan dalam acara kabur, kami selanjutnya memproses kandungan input untuk mengalih keluar aksara yang tidak memenuhi syarat;
Ringkasan
Melalui contoh kod di atas, kami boleh melaksanakan sekatan ke atas kandungan input pengguna dan memastikan kandungan input memenuhi keperluan. Dalam pembangunan sebenar, kod boleh diubah suai dan diselaraskan mengikut keperluan khusus untuk memenuhi keperluan senario yang berbeza. Saya harap artikel ini berguna kepada anda, terima kasih kerana membaca!
Atas ialah kandungan terperinci Pengesahan jQuery: hadkan input kepada nombor dan titik perpuluhan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!