Heim >Web-Frontend >js-Tutorial >js und jquery validieren Optionsfelder, Kontrollkästchen bzw. Dropdown-Felder_Javascript-Kenntnisse

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

WBOY
WBOYOriginal
2016-05-16 15:25:131684Durchsuche

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

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="提交">

(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()">
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="提交">
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.

Stellungnahme:
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