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
載入中…