Heim > Web-Frontend > js-Tutorial > Hauptteil

js und jquery validieren Optionsfelder, Kontrollkästchen bzw. Dropdown-Felder_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:25:13
Original
1678 Leute haben es durchsucht

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()">

Nach dem Login kopieren
Es ist viel einfacher, jQuery zur Überprüfung zu verwenden. Sie können weniger schreiben und mehr tun, haha:


<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="提交">
Nach dem Login kopieren

(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()">
Nach dem Login kopieren
Mit jQuery validieren:

 <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="提交">
Nach dem Login kopieren
Das Obige ist der Code zum Überprüfen von Optionsfeldern, Kontrollkästchen und Dropdown-Feldern mit js bzw. jquery. Ich hoffe, dass er für das Lernen aller hilfreich ist.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage