HTML 輸入模式屬性

Question

我想從用戶那里獲取“Z1C19999”形式的輸入。 那么我如何設置模式屬性。

我嘗試使用以下代碼。

<input type="text" name="farmercode" class="text" pattern="Z[1-3]+C[1-5]+[0-9]{5,8}" title="* Farmer's Lab Code can have only alphabets Z, C and digits between 0 and 9 in the format "Z1C19999" ">

輸入必須具有語法 Z[1 到 3 之間的任何值]C[1 到 5 之間的任何值][0 到 9999 之間的任何值]。 最小長度為 5，最大長度為 8。

就我而言，即使我僅將 123456 作為輸入，它仍然接受錯誤的值。 我希望它以 Z 開頭。

Answer 1

您的模式在我測試的 Chrome 中效果很好：請參閱此 CodePen

 input[pattern] ~ span { display: none; } input[pattern]:valid ~ span.valid { display: inline-block; } input[pattern]:invalid ~ span.invalid { display: inline-block; }

 <form> <input type="text" name="farmercode" class="text" pattern="Z[1-3]+C[1-5]+[0-9]{5,8}" title="* Farmer's Lab Code can have only alphabets Z, C and digits between 0 and 9 in the format Z1C19999"> <span class="valid">Valid</span> <span class="invalid">Invalid</span> </form>

但是，我認為最能描述您的句子的 RegExp 如下

輸入必須具有語法 Z[1 到 3 之間的任何值]C[1 到 5 之間的任何值][0 到 9999 之間的任何值]。 最小長度為 5，最大長度為 8。

Z[1-3]C[1-5][0-9]{5,8}

這使我得出結論：是什么讓您認為它不起作用？

提示：添加required屬性以強制內部的某些內容。