按 ID 验证 JavaScript 中的列表框和单选按钮

Validating list box and radio button in javascript by ID

本文关键字：列表 单选按钮 ID 验证 JavaScript      更新时间：2023-09-26

我尝试按 ID 验证列表框和单选按钮，仅在提交时。如果我在浏览器中运行，它不会显示任何警报。单击提交按钮时，我想运行脚本以验证是否选择了单选和列表框（如果选择了单选和列表框而不执行任何操作）。如果未选择一个，我希望它发布警报消息。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
        function validate()
    {
        if (document.getElementById("drop1").value == "-1")
        {
            alert("please select A");
        }
        if (document.getElementById("drop2").value == "-1")
        {
            alert("please select B");
        }
        if (document.getElementById("drop3").value == "-1")
        {
            alert("please select C");
        }
        if (document.getElementById("drop4").value == "-1")
        {
            alert("please select D");
        }
        if (document.getElementById("drop5").value == "-1")
        {
            alert("please select E");
        }
            var radios = document.getElementsByName("A");
            var formValid = false;
            var i = 0;
            while (!formValid && i < radios.length) 
            {
                if (radios[i].checked) formValid = true;
                i++;        
            }
            if (!formValid) alert("Must check some option!");
            return formValid;
        }
    }
</script>
</head>
<body>
A:<select id="drop1">
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="0">All</option>
</select>
 B:   <select id="drop2" >
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="0">All</option>
</select>
C:<select id="drop3" >
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="0">All</option>
</select>
D:<select id="drop4" >
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="0">All</option>
</select>
E:<select id="drop5" >
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="0">All</option>
</select>
<input type="radio" id=myradio1 name="A" value="1">one
<input type="radio" id=myradio2 name="A" value="2">two
<input type="radio" id=myradio3 name="A" value="3">three
<input type="submit" value="submit" onclick="validate()">
</body>
</html>

onsubmit 不是 input 类型的有效属性，它应该位于 <form> 元素上：

<form method="POST"  onsubmit="validate()">

</form>

将代码包装在<form>内

js小提琴

<小时 />

如果您不想使用<form>则应使用onlick而不是onsubmit：

<input type="submit" value="submit" onclick="validate()"/>

js小提琴

<小时 />如果要检查是否选中了任何选择框，可以使用以下命令：

if (document.getElementById("drop1").value == "")
{
   alert("please select A");
}

请注意，您需要一个不是值的选择框的"占位符"。因此，当用户未选择任何内容时，默认情况下会选择占位符;没有值。

因此，当选择占位符时，会抛出错误

目录：

 A:<select id="drop1">
    <option value="" style="display: none;">Placeholder</option>
    <option value="2">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="0">All</option>
</select>

js小提琴

我只做了一个列表框检查，你可以用同样的方式做其他的。

<小时 />

还要将您的 ID 姓名放在引号内：

 <input type="radio" id='myradio1' name="A" value="1"/>one
 <input type="radio" id='myradio2' name="A" value="2"/>two
 <input type="radio" id='myradio3' name="A" value="3"/>three
 <input type="submit" value="submit"/>

希望这有帮助！

您可以检查特定选择框的值：

http://jsfiddle.net/sMNd2/

<select id="drop4" >
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>


$("#selector").click(function() {
alert($("#drop4").val());

}）;

并查看选择了哪个值。根据该警报，用户。

onsubmit 事件只能在form元素上设置。在 input 元素上，您可以设置onclick事件。

相关文章：