HTML 属性:minlength

minlength 属性定义了用户可以在 <input><textarea> 中输入的字符串长度的最小值。该属性的值必须是非负整数。

字符串长度是以 UTF-16 码元为单位进行计算的,通常(对大多数文本而言)等同于字符个数。如果未指定 minlength,或指定了无效值,则输入将没有最小长度限制。该值必须小于或等于 maxlength 的值,否则该值将永远无效,因为不可能同时满足这两个条件。

如果字段文本值的长度小于 minlength 的 UTF-16 码元长度,输入将无法通过约束验证,validityState.tooShort 将返回 true。只有当用户更改值时,才会应用限制验证。一旦提交失败,某些浏览器会显示错误信息,说明所需的最小长度和当前长度。

minlength 不意味着输入为 required;只有当用户输入了一个值时,输入才会违反 minlength 约束。如果输入不是 required 的,即使设置了 minlength,也可以提交空字符串。

尝试一下

示例

通过指定 minlength="5",值要么为空,要么至少为 5 个字符时才为有效。

html
<label for="fruit">输入长度至少为 5 个字母的水果名称</label>
<input type="text" minlength="5" id="fruit" />

我们可以使用伪类,根据值是否有效来设计元素样式。只要值为空或其长度大于等于 5,该值就是有效的。如 Lime 是无效的,而 lemon 是有效的。

css
input {
  border: 2px solid currentcolor;
}
input:invalid {
  border: 2px dashed red;
}
input:invalid:focus {
  background-image: linear-gradient(pink, lightgreen);
}

规范

Specification
HTML
# attr-input-minlength
HTML
# attr-textarea-minlength

浏览器兼容性

html.elements.input.minlength

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
minlength

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.textarea.minlength

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
minlength

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见