Heim >Web-Frontend >js-Tutorial >js und jquery validieren Optionsfelder, Kontrollkästchen bzw. Dropdown-Felder_Javascript-Kenntnisse
In diesem Artikel werden die js- und jQuery-Überprüfung von Radio, Kontrollkästchen und Dropdown-Feld (Auswahl) vorgestellt. Der spezifische Inhalt ist wie folgt
(1). Lassen Sie uns zuerst über das Radio sprechen. Radio und Kontrollkästchen haben beide den gleichen Namen und mehrere Werte. Beim Abrufen des Radiowerts können wir nicht der gewöhnlichen Textbox.value-Methode folgen, sondern um zu bestimmen, welcher ausgewählt ist.
Die JS-Verifizierung besteht darin, getElementsByName() zu verwenden, um das Array abzurufen
JS-Code lautet wie folgt:
<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) Kontrollkästchen, Es besteht wirklich kein Grund, darüber zu sprechen, da das Kontrollkästchen und das Optionsfeld genau gleich sind. Ändern Sie einfach das Optionsfeld im obigen Skript in „Kontrollkästchen“ und es ist in Ordnung . !
(3) Dropdown-Feld (auswählen)
Verwenden Sie die JS-Verifizierung, den JS-Code:
<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="提交">