被忽略的HTML5模式驗證

我有一個電子郵件輸入字段，我有一個^[^@][email protected][^@.]+.[^@]+$的正則表達式，但運行時它不需要.com。被忽略的HTML5模式驗證

轉到https://jsfiddle.net/uscktx9d/並輸入www @ www並點擊提交。這應該失敗驗證，但不是。正如你在這裏可以看到https://regex101.com/r/pB6iF4/1，正則表達式應該要求.com。

爲什麼我的HTML5不需要這個？

2016-01-18 Boone

你缺少了'\''逃避字面'.'中的問題，並在鏈接的小提琴。將'\''添加到小提琴中，這樣整個正則表達式就是'^ [^ @] + @ [^ @。] + \。[^ @] + $'拒絕'www @ www'並接受www @ www。 com'。 – Cirdec

，你可以避免在HTML5模式中隱含的第一個^和最後一個$：[^ @] + @ [^ @] + \。[^ @] +就足夠了 –

如果您要對電子郵件使用HTML5輸入驗證，請使用type email。這將對電子郵件進行原生HTML5驗證，並增加了好處（如在移動設備的虛擬鍵盤上顯示@符號）。

此外，請記住任何前端驗證應該在後端重新驗證。

但是，要回答您的問題，您需要使用反斜槓轉義.。

2016-01-18 20:24:07 Sam

謝謝。不幸的是，'type email'也不關心.com。逃跑是我錯過的。 – Boone

也許一個很好的折衷是''input type =「email」pattern =「\。[^ @] + $」>'，該模式只會檢查TLD，HTML5會照顧'@'邏輯。 – Sam

在一個正則表達式中，一個文字點應該被聲明爲一個轉義的\.符號。請參閱Special characters in regular expressions如果您想確保它們被視爲文字，應該逃脫。

另外，HTML5 pattern attribute的值默認爲錨定，即整個圖案被包裹爲^(?:和)$。

用於該屬性的正則表達式語言是相同的，在JavaScript中使用，不同的是圖案屬性與整個值匹配，而不僅僅是任何子集（有點，就好像它在開始隱含了^(?:的模式和)$在最後）。

因此，你只需要使用

<input name="asdf" pattern="[^@][email protected][^@.]+\.[^@]+" placeholder="[email protected]" title="[email protected]">

2016-01-18 21:32:16

回答