如何在Javascript中验证select标记

对于一个学校作业，我不得不重新设计一个网站，这是我网站的一部分，我为用户创建了一个表单。这是我的第一年，对我来说一切都是新的，所以如果我不明白你说的话，请不要生我的气：）！

我的老师告诉我，我使用的Javascript越多，分数越高。他还说，所有的表单验证都需要用Javascript进行

我已经对其他输入字段进行了验证，但是使用HTML选择标记/下拉菜单我没有成功。我尝试了不同的代码和方法，但没有。。目前，我没有select标记的任何代码，只有我已经为其他inputfields编写的代码

这是选择标记/下拉菜单的HTML代码

<label for ="data">Kies een datum</label>
        <select name="datum">
        <option value="datum">15 april 2017</option>
        <option value="datum">18 april 2017</option>
        <option value="datum">21 april 2017</option>
        <option value="datum">26 april 2017</option> 

Kies-een数据
2017年4月15日
2017年4月18日
2017年4月21日
2017年4月26日

---

这个下拉菜单需要的是在未选择任何选项时发出警报…

您需要向

选择添加
所需的
属性，然后需要有一个空选项（带有空值）

这将在支持的浏览器中警告用户。您仍应在后端验证代码，否则不受支持的浏览器仍将发送数据

<form action="" method="post">
    <label for="data">Kies een datum</label>
    <select id="data" name="datum" required>
        <option value="">Please Select a date...</option>
        <option value="datum">15 april 2017</option>
        <option value="datum">18 april 2017</option>
        <option value="datum">21 april 2017</option>
        <option value="datum">26 april 2017</option>
    </select>
    <input type="submit">
</form>


基斯伊恩数据
请选择一个日期。。。
2017年4月15日
2017年4月18日
2017年4月21日
2017年4月26日

这是Chrome的结果

您的代码块存在一些问题。标签标签的
for
属性应与选择标签的
id
属性相对应。每个选项的
值
属性应该是唯一的，最好是机器可读的

<label for="datum">Kies een datum</label>
<select name="datum" id="datum">
  <option value=""></option>
  <option value="2017-04-15">15 april 2017</option>
  <option value="2017-04-18">18 april 2017</option>
  <option value="2017-04-21">21 april 2017</option>
  <option value="2017-04-26">26 april 2017</option>
</select>

香草JS：

var datum = document.getElementById('datum');
var datumValue = datum.options[datum.selectedIndex].value;

当用户提交表单时，将触发
表单
元素的
提交
事件。在这个事件中，您可以执行所有验证（假设您可以等待用户提交以通知他们存在验证错误）

另一个注释。
标签
元素必须指向与使用
for
属性相关的元素的
id
。您的
标签
指向
数据
，但您的
选择
根本没有
id

以下是工作的HTML和JavaScript：


//首先，获取表单的引用。有很多方法可以做到这一点
//但是，在HTML中，我给了表单一个id，这是一个简单的
//在JavaScript中找到它的方法
var frm=document.getElementById（“frmTest”）；
//我们还需要对您想要使用的任何其他HTML元素的引用
var sel=document.getElementById（“数据”）；
//现在，将表单设置为在触发其提交事件时调用函数
frm.addEventListener（“提交”，验证）；
//下面是提交事件发生时将执行的函数
//它将自动传递一个表示提交的参数
//事件itsef（这里，我们将其作为“evt”接收）。
功能验证（evt）{
//执行您想要的任何验证
//检查用户是否从下拉列表中选择了任何内容
如果（选择值==“”）{
//select没有值，因此仍必须选择第一个选项
evt.preventDefault（）；//取消提交事件
evt.stopPropagation（）；//停止事件冒泡到其他元素
警告（“您尚未从列表中选择任何内容！”）；
}
//select有一个值。让事件正常进行。
}

基斯伊恩数据
…请选择。。。
2017年4月15日
2017年4月18日
2017年4月21日
2017年4月26日
提交
请提供一个您尝试过的示例。如果我们不知道您尝试了什么，我们无法告诉您为什么它不起作用。请始终张贴您正在使用的代码以及您遇到的具体问题。“没用”并不能告诉我们太多。你甚至还没有告诉我们你想做什么。“验证”可能意味着很多事情……但是，你仍然不会告诉我们你所说的“验证”是什么意思，或者你想要实现什么。为什么需要JavaScript来解决您的问题？为什么不使用下面给出的纯HTML答案？@GetOffMyLawn可能是，但既然给出的答案解决了这个问题，而且OP没有具体说明任何事情，我们需要更多信息。我们为您提供了一个问题的解决方案，只需要您将
必需的
添加到
选择
标记中。解决您的问题不需要JavaScript。然而，您表示该答案不适合您，并询问如何用JavaScript实现这一点。你为什么需要JavaScript？@BusraOgultay你需要告诉我们你想做什么。上面的答案根本没有JavaScript。它依赖于HTML
required
属性来强制用户选择某些内容。但是，由于我们不知道您所说的“验证”是什么意思，我们无法更具体地说明。如果您要使用此技术，第一个
选项应如下所示：
请选择…
，而不是一个空白的
选项。考虑用户可访问性和良好的用户体验。只需将
id=data
添加到
select
中，即可使
标签正常工作。
label
的
for
属性对应于目标元素的
id
，而不是
name
。（）另外，
value
属性可以有任何值，只要它对表单处理程序有意义。修改了答案。谢谢你的帮助！但是$sign是JQuery，对吗？我的老师拒绝使用JQuery…你在问题上使用了JQuery标记@BusraOgultay啊哈！现在我们有了。这是学校的作业，作业中要求使用JavaScript（尽管解决问题不需要JavaScript）。如果y
var datum = document.getElementById('datum');
var datumValue = datum.options[datum.selectedIndex].value;