输入的最小值和最大值实际上是做什么的？

Question

我期望

min

和

max

为

<input>

将可选选项限制在两个值之间的范围。例如，他们在

<input type="number">

中这样做。但对于

type="datetime-local"

他们却没有。据我所知，他们实际上并没有做太多任何事情？

<label for="select_start">Without min/max</label>
<input type="datetime-local" id="select_start">

<label for="select_end">With min/max</label>
<input type="datetime-local" id="select_end" min="2023/5/9" max="2023/6/8">

据我所知，两者完全相同（2023 年在 Google Chrome 上查看它们）。

Do

min

和

max

实际上做了什么吗？我可以做什么来将可选选项限制在所需的范围内？

Answer 1

您的理解正确，您可以使用

min

和

max

属性缩小输入值的范围。您刚刚提供的日期格式错误。由于您创建了“datetime-local”类型的输入字段，因此最小值和最大值需要采用标准 ISO 8601 格式：

yyyy-mm-ddThh:mm

，例如

1970-01-01T23:59

。

示例

// Just show value of range
const value = document.querySelector("#rangeValue")
const input = document.querySelector("#rangeInput")
value.textContent = input. Value
input.addEventListener("input", (event) => {
  value.textContent = event.target.value
})

div {
  margin: 5px;
}

<form>
  <div>
    <label for="number">number</label>
    <input type="number" name="" min="1000" max="2000">
  </div>

  <div>
    <label for="range">range</label>
    <input type="range" name="range" id="rangeInput" min="-4" max="10" step="2">
    <output id="rangeValue"></output>
  </div>

  <div>
    <label for="date">date</label>
    <input type="date" name="date" min="2023-05-09" max="2023-06-08">
  </div>

  <div>
    <label for="time">time</label>
    <input type="time" name="time" min="12:00" max="14:00">
  </div>

  <div>
    <label for="datetime-local">datetime-local</label>
    <input type="datetime-local" name="datetime-local" min="2023-05-09T00:00" max="2023-06-08T00:00">
  </div>

  <div>
    <label for="week">week</label>
    <input type="week" name="week" min="2023-W12" max="2023-W14">
  </div>

  <input style="display: none;" name="disable-form" required>

  <button type="submit">Test</button>
</form>

更多信息

• HTML 的全局日期（时间）格式 - MDN 文档
• 的属性 - MDN 文档
• 的属性 - MDN 文档
• 的属性 - MDN 文档

警告

• 需要注意的是，您永远不应该信任用户输入！ 很高兴您在此处强制执行最小值和最大值，使用户可以更轻松地选择日期。但是，恶意用户仍然可以向服务器发送超出此范围的值，因此在服务器端验证收到的输入以确保其满足您的期望至关重要。敌对访问者仍然能够传输偏离您要求的值，这就是为什么您需要执行服务器端检查以验证接收到的值是否合适。

Answer 2

min 和 max 属性不适用于日期时间本地输入类型。这些通常与日期或数字输入一起使用。 使用日期时间本地类型将可选选项限制在一定范围内需要在 JavaScript 中使用自定义验证方法。