Artikel ini memperkenalkan pengesahan js dan jQuery bagi radio, kotak pilihan, dan kotak lungsur (pilih) masing-masing Ia dikongsi dengan semua orang untuk rujukan anda
(1). Mari kita bincangkan tentang radio dahulu Radio dan kotak semak kedua-duanya mempunyai nama yang sama dan nilai berbilang Apabila mendapatkan nilai radio, kita tidak boleh mengikuti kaedah kotak teks biasa, tetapi Untuk menentukan yang mana dipilih.
Pengesahan JS ialah menggunakan getElementsByName() untuk mendapatkan tatasusunan
Kod js adalah seperti berikut:
<script> function test(){ var sex = document.getElementsByName("sex"); var flag = 0; for (var i=0;i<sex.length;i++) { if (sex.item(i).checked == true) { flag = 1; break; } } if (!flag) { alert("请选择性别"); } } </script> <input type="radio" name="sex" value="m">男<input type="radio" name="sex" value="f">女 <input type="button" id="btn" value="提交" onclick="test()">
<script src="jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ $("#btn").click(function(){ if ($(":radio:checked").length == 0) { alert("你的性别未选择"); } }); }); </script> <input type="radio" name="sex" value="m">男<input type="radio" name="sex" value="f">女 <input type="button" id="btn" value="提交">
(2) Kotak semak, Tidak perlu bercakap tentang perkara ini, kerana kotak semak dan butang radio adalah sama. Cuma tukar radio dalam skrip di atas ke kotak semak dan ia akan menjadi ok .
(3) Kotak lungsur (pilih)
Gunakan pengesahan js, kod js:
<script> function test(){ var sex = document.getElementById("sex").value; if (!sex) { alert("你的性别未选择"); } } </script> <select id="sex"> <option value="">--请选择性别--</option> <option value="m">男</option> <option value="f">女</option> </select> <input type="button" id="btn" value="提交" onclick="test()">
<script src="jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ $("#btn").click(function(){ if ($("#sex").val() == '') { alert("你的性别未选择"); } }); }); </script> <select id="sex"> <option value="">--请选择性别--</option> <option value="m">男</option> <option value="f">女</option> </select> <input type="button" id="btn" value="提交">