Gunakan jQuery untuk melaksanakan nombor kotak input dan pengesahan titik perpuluhan-tutorial js-php.cn

Gunakan jQuery untuk melaksanakan nombor kotak input dan pengesahan titik perpuluhan

WBOY

Lepaskan： 2024-02-25 17:36:07

asal

861 orang telah melayarinya

Gunakan jQuery untuk melaksanakan nombor kotak input dan pengesahan titik perpuluhan

Tajuk: Gunakan jQuery untuk melaksanakan pengesahan nombor kotak input dan titik perpuluhan

Dalam pembangunan web harian, pengesahan nombor kotak input dan titik perpuluhan adalah salah satu keperluan biasa. Dengan menggunakan jQuery, kita boleh dengan mudah melaksanakan pengesahan titik berangka dan perpuluhan bagi kotak input. Di bawah, saya akan menunjukkan kepada anda contoh kod khusus:

Pertama, kami memerlukan struktur HTML yang ringkas, termasuk kotak input:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入框数字和小数点验证</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<input type="text" id="inputBox" placeholder="请输入数字或小数">

</body>
</html>

Salin selepas log masuk

Seterusnya, kami menggunakan jQuery untuk menulis kod untuk fungsi pengesahan. Kita boleh menggunakan acara mendengar untuk menilai kandungan kotak input dan memutuskan sama ada untuk membenarkan input berdasarkan syarat. Kod khusus adalah seperti berikut:

$(document).ready(function() {
    $('#inputBox').on('input', function() {
        var value = $(this).val();
        if(value !== '') {
            if(/^[0-9]+(.[0-9]+)?$/.test(value)) {
                // 是数字或小数，允许输入
                console.log("是数字或小数，允许输入");
            } else {
                // 不是数字或小数，禁止输入
                console.log("不是数字或小数，禁止输入");
                $(this).val(value.slice(0, -1));
            }
        }
    });
});

Salin selepas log masuk

Dalam kod di atas, kami menggunakan acara input untuk memantau perubahan input dalam kotak input. Apabila nilai kotak input berubah, kita mula-mula mendapat nilai kotak input, dan kemudian menggunakan ungkapan biasa untuk menentukan sama ada ia adalah nombor atau perpuluhan. Jika ia adalah nombor atau perpuluhan, input dibenarkan jika tidak, input disekat dan aksara yang salah dikeluarkan.

Melalui contoh kod di atas, kami berjaya melaksanakan fungsi pengesahan nombor kotak input dan titik perpuluhan. Apabila pengguna memasukkan nombor atau perpuluhan dalam kotak input, mereka akan menerima maklum balas tepat pada masanya, dengan berkesan menghalang input yang salah. Fungsi sedemikian amat penting dalam senario yang melibatkan wang atau pengiraan berangka lain, dan boleh meningkatkan pengalaman pengguna dan ketepatan operasi.

Atas ialah kandungan terperinci Gunakan jQuery untuk melaksanakan nombor kotak input dan pengesahan titik perpuluhan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!