我的按钮正在工作，即使输入设置为"required"

Question

我创建了一个表单，输入为文本类型，还有一个按钮来执行Javascript代码。

<input required type="text" id="bNum" value="" name="bNum" size="6" maxlength="6" placeholder="Badge Number" onkeyup="this.value = this.value.toUpperCase();">
<button onclick=" verify();return false;">Verify</button>
function verify () {
var bno = document.getElementById("bNum").value;
switch (bno) {
case "AJC8":
alert("You are a Verified member!")
break;

case "AJB0":
alert("You are a Verified member!")
break;

default:
alert("You are Not a Verified member!")
break;
}
}

如果我单击按钮，函数执行它，并且不显示该字段是必需的。

Answer 1

你混合了多个概念和行为，你的期望与这些HTML属性的当前规范不匹配。

对于<input>元素的required属性，MDN是这样说的:

需要

required是一个布尔属性，如果存在，则表示用户必须为输入指定一个值，然后才能提交所属表单． 需要的属性支持文本、搜索、url、电话、email、日期、月份、星期、时间、datetime-local、号码、密码、复选框、单选和文件输入。

我加了强调。注意，required属性只会阻止表单的提交。这意味着它将只显示提交<form>元素的操作，这不是您在这里要做的。

required根本不阻止其他交互，尽管你可以依靠它在JS代码中实现你自己的阻塞逻辑，并控制与元素的交互。

例如，您可以在按钮上添加onClick侦听器，并检查您的输入是否标记为"必需";并且有一个空值。