使用ng-pattern的Angular中的意外驗證行爲

我正在使用Angular的內置表單驗證器體驗一些奇怪的驗證行爲。在我的用戶名<input>字段中，我有一個只允許字母或數字的ng模式（ng-pattern="/[A-Z0-9]/i"）。使用ng-pattern的Angular中的意外驗證行爲

但驗證並不按照我期望的方式工作。例如，當我輸入一堆符號時，它會識別用戶名輸入無效。 [email protected]#$。但是，如果我用幾個字母開頭，然後鍵入一串符號（如[email protected]#$），它將在第一個符號!上引發驗證錯誤，但是當我鍵入第二個符號@時，它會將錯誤返回關閉。我輸入的每個第3或第4個符號都會再次打開/關閉錯誤。

我試着看過Angular文檔，但是我沒有看到任何表明我錯誤地執行了ng-pattern的東西。

下面是代碼：

<form name="signupForm" ng-submit='signup()'> 
    <input name="nameInput" type='text' ng-model='user.username' ng-pattern = "/[A-Z0-9]/i"> 
    <input name="passwordInput" type="password" ng-model='user.password' ng-pattern = "/[A-Z0-9]/i"> 
    <button>signup</button> 
</form> 
<span class = 'error' ng-show="signupForm.nameInput.$invalid && signupForm.nameInput.$dirty">Invalid username</span>

來源

2015-11-07 giwook

_「我有一個只允許使用字母或數字的ng模式」_ - 否。只要其中有一個字母或數字，您就有一個允許任何**的模式。您偶爾會收到一條錯誤消息，因爲\ g標誌允許下一次檢查從最後一次匹配開始，而不是字符串的開始。 – zeroflagL

是的，我的正則表達式不正確。謝謝！ – giwook

我覺得這是你所需要的：

<input name="nameInput" type='text' ng-model='user.username' ng-pattern="/^[A-Z0-9]*$/i">

的Angular documentation明確規定，你不應該使用g標誌。

正則表達式中的星號表示'零個或多個'，所以空字符串將被視爲有效。您可以使用'+'（'一個或多個'），但這意味着當用戶尚未在輸入字段中輸入任何內容時，錯誤消息將立即顯示。你可以用ng-required代替。

來源

2015-11-07 20:53:23

我想'/ i'修飾符是允許的。 –

是的，當然，我已將/ i添加到我的答案中。謝謝！ –

使用ng-pattern的Angular中的意外驗證行爲

回答

相關問題