Vaadin 23 和客戶端正則表達式驗證

Question

進入新的 Vaadin 23 版本后，我看到組合 setPattern/setPreventInvalidInput 已被 setPattern/setAllowedCharPattern 取代，但行為不一樣。 在新的 Vaadin 版本中，如何防止用戶使用正則表達式在客戶端輸入無效值？ 我需要用戶不能輸入對正則表達式無效的數據。

例子：

tf.setPattern("(\\d){0,5}");
tf.setPreventInvalidInput(false);

用戶不能輸入超過 5 個數字，這是預期的行為。

tf.setPattern("(\\d){0,5}");
tf.setAllowedCharPattern("\\d");

用戶可以輸入超過 5 個數字，該字段將被設置為無效，但行為與以前不同。

有沒有一種方法可以使用 Vaadin 23/24 功能實現與 setPreventInvalidInput 相同的效果？

問候，

Answer 1

這不一定會取代所有可能的正則表達式的功能，但如果您的目標是防止用戶實際輸入超過 5 個數字，如您的示例所示，那么您可以保留這部分只允許數字：

tf.setAllowedCharPattern("\\d");

並添加最大長度：

tf.setMaxLength(5);

然后用戶將無法在文本字段中鍵入超過 5 個數字。 當您嘗試鍵入非數字時，您不會在字段上獲得很好的搖晃效果，但用戶將被阻止鍵入超過 5 個字符（並且只能鍵入數字，由於正則表達式）。

或者，您可以只使用與您使用的相同的東西，但將 setPreventInvalidInput() 方法設置為 true（在您的示例中為 false）：

tf.setPattern("\\d{0,5}");
tf.setPreventInvalidInput(true);

這仍然有效，盡管 setPreventInvalidInput() 方法已被棄用，因此可能是一個問題，因為它看起來會在 Vaadin 的未來版本（可能是 24）中被刪除。

多玩這個，我懷疑這個被棄用的原因是它對輸入有不可預測的影響。 例如，像“ab”這樣應該允許“ab”的簡單正則表達式不允許任何輸入，因為正則表達式模式必須匹配整個字符串，顯然你不能用一個字符鍵入“ab”所以沒有字符完全被允許。 這一觀點得到了對相關 GitHub 問題的評論和 GitHub 問題的討論的支持。