select 的自定义 html5 验证

Question

我有一个这样的元素select：

<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>

我希望用户 select 一个选项，例如opt2, opt3... 但是 opt1, 如何使用 html 5 验证来验证 select?

Answer 1

您可以执行以下操作：

<select name="select">
  <option value="opt1" selected disabled>Select One Value Only</option>
  <option value="opt2">Type 2</option>
  <option value="opt3">Type 3</option>
</select>

在上面的代码片段中，opt1 默认为 select。用户只能 select opt2 或 opt3，但一旦他们这样做，他们就不能 selecte opt1，希望这是你正在寻找的行为对于.

Answer 2

我认为在此处添加验证的唯一方法是将默认选项值设置为空字符串并将 required 属性添加到 select 元素。现在您可以点击提交按钮查看验证：

<form>
  <label >Choose an option:</label>
  <select name="select" required>
    <option value="" disabled selected>Select One Value Only</option>
    <option value="opt2">Type 2</option>
    <option value="opt3">Type 3</option>
  </select>
  <input type="submit">
</form>

这里的问题是，当您将默认选项的值设置为非空字符串时，验证会将其推断为已经选择了有效值，因此此时不会触发验证。

Answer 3

尝试使用：

<select name="select" required>
  <option value="opt1" selected="selected" disabled>Select One Value Only</option>
  <option value="opt2">Type 2</option>
  <option value="opt3">Type 3</option>
</select>

select 的自定义 html5 验证

Custom html5 validation for select

html

javascript

html5-validation