使用 HTML 验证长度

在 HTML 中，可以使用 maxlength 和 minlength 属性来验证用户输入的长度是否符合要求。

maxlength

maxlength 属性用于限制输入框中输入的字符的最大长度。当达到最大长度时，用户将无法继续输入。

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" maxlength="5"> <!-- 最大长度为 5 个字符 -->
  <br>
  <label for="email">电子邮箱：</label>
  <input type="email" id="email" name="email" maxlength="50"> <!-- 最大长度为 50 个字符 -->
  <br>
  <input type="submit" value="提交">
</form>

在上面的例子中，姓名输入框的最大长度为 5 个字符，电子邮箱输入框的最大长度为 50 个字符。

如果用户在姓名输入框中输入了超过最大长度的字符，浏览器会自动阻止用户输入，并显示错误提示：

<input type="text" id="name" name="name" maxlength="5" required>

上面的代码中，使用了 required 属性来表示该输入框为必填项。如果用户未填写此输入框，浏览器也会自动阻止提交，并显示错误提示。

minlength

minlength 属性用于限制输入框中输入的字符的最小长度。当输入的字符数不足最小长度时，用户将无法提交表单。

<form>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" minlength="8"> <!-- 最小长度为 8 个字符 -->
  <br>
  <input type="submit" value="提交">
</form>

在上面的例子中，密码输入框的最小长度为 8 个字符。如果用户输入的字符数不足 8 个，浏览器会自动阻止提交，并显示错误提示。

总结

使用 maxlength 和 minlength 可以对用户输入的长度进行验证，防止用户输入过多或过少的字符。此外，我们还可以使用 required 属性来标识必填项，确保用户填写了关键信息。