HTML 属性：minlength
minlength 属性定义了用户可以在 <input> 或 <textarea> 中输入的 字符串的最小长度。该属性的值必须是 0 或更大的整数。
长度以 UTF-16 码元为单位度量，这通常（但并非总是）等于字符数。如果未指定 minlength，或者指定的值无效，则输入没有最小长度。此值必须小于或等于 maxlength 的值，否则该值将永远无效，因为无法同时满足两个条件。
如果字段的文本值的长度小于 minlength 个 UTF-16 码元，则输入将因约束验证失败，此时 validityState.tooShort 将返回 true。约束验证仅在用户更改值时应用。一旦提交失败，一些浏览器会显示一条错误消息，指示所需的最小长度和当前长度。
minlength 并不意味着 required；只有当用户输入了值时，输入才会违反 minlength 约束。如果输入不是 required，即使设置了 minlength，也可以提交空字符串。
试一试
<label for="name">Product name:</label>
<input
id="name"
name="name"
type="text"
value="Shampoo"
minlength="3"
maxlength="20"
required />
<label for="description">Product description:</label>
<textarea
id="description"
name="description"
minlength="10"
maxlength="40"
required></textarea>
label {
display: block;
margin-top: 1em;
}
input:valid,
textarea:valid {
background-color: palegreen;
}
示例
通过添加 minlength="5"，该值必须为空或至少为五个字符长才能有效。
html
<label for="fruit">Enter a fruit name that is at least 5 letters long</label>
<input type="text" minlength="5" id="fruit" />
我们可以使用伪类来根据值是否有效来设置元素的样式。只要值为空（null）或长度为五个或更多字符，该值就是有效的。*Lime* 无效，*lemon 有效*。
css
input {
border: 2px solid currentColor;
}
input:invalid {
border: 2px dashed red;
}
input:invalid:focus {
background-image: linear-gradient(pink, lightgreen);
}
规范
| 规范 |
|---|
| HTML # attr-input-minlength |
| HTML # attr-textarea-minlength |
浏览器兼容性
html.elements.input.minlength
加载中…
html.elements.textarea.minlength
加载中…