html pattern =「[A-Za-z] {50}」表示有效輸入無效

Question

我有一個帶有一些文本字段的頁面，我想限制用戶輸入，所以我使用了html5模式屬性，像這樣：

<input name="team_name" type="text" pattern="[A-Za-z]{50}" value="<?php echo $team_name;?>"> 

這應該讓我的b/W AA-ZZ只輸入字母的名字，但是當我試圖進入一個有效的名字，但它仍然告訴我符合要求的格式。 我錯過了什麼？爲什麼總是告訴我我的輸入是無效的？

Answer 1

規則[A-Za-z]{50}將使名稱只有當它包含確切50字母可接受。

[A-Za-z]{10,50} 

這將使名稱最少10個，最多50個字符。 根據您的要求更新表達式。

演示：

input:invalid { 
 
    color: red; 
 
}

<form> 
 
    <input name="team_name" type="text" pattern="[A-Za-z]{10,50}" value=""> 
 
    <br /> 
 
    <input type="submit"> 
 
</form>

Answer 2

在正則表達式模式{50}意味着恰好 50個字符。這不太可能是你想要的。

如果要將輸入限制爲最多50個字符，請使用maxlength屬性。

<input name="team_name" type="text" pattern="[A-Za-z]+" maxlength="50">