HTML 5工具提示集成在瀏覽器中顯示錯誤消息

我有這個網站：HTML 5工具提示集成在瀏覽器中顯示錯誤消息

<input ng-disabled="disable" class="form-control ng-valid-maxlength ng-dirty ng-invalid ng-invalid-email ng-invalid-pattern ng-invalid-email-remove ng-touched" maxlength="50" ng-model="current.email" name="email" id="personEmail" pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" aria-disabled="false" aria-invalid="true" style="" type="email">

當提交與無效的電子郵件地址的形式，工具提示錯誤將出現接近輸入字段。輸入字段中的文本在每個瀏覽器中都不相同。 Firefox工具提示與Chrome工具提示不同，它與Explorer工具提示不同。

我認爲這是我的應用程序處理這個。但是現在我確信它是在別的地方。當我在所有文件中搜索工具提示中顯示的文本時，找不到任何文件。

那麼，瀏覽器本身是如何創建消息的呢？

將鼠標懸停在輸入字段上時，我會看到顯示的相同文本，以防萬一我輸入錯誤的電子郵件，例如它是alt-tag。

即時尋找的是修改或刪除此工具提示。原因是由於一些奇怪的原因，Explorer中的文本不完整。而在其他瀏覽器中的工具提示的信息是完全可以理解的，在資源管理器中就指出這樣的事情（從非英語另一種語言，現在翻譯）：

You must enter an email address in this format:

正如喲可以看到，它要求在編寫正確的格式，但沒有解釋格式是什麼。

**** ***編輯

這是生成的html：

<input ng-disabled="disable" class="form-control ng-valid-maxlength ng-dirty ng-invalid ng-invalid-email ng-invalid-pattern ng-invalid-email-remove ng-touched" maxlength="50" ng-model="current.email" name="email" id="personEmail" pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" aria-disabled="false" aria-invalid="true" style="" type="email">

來源

2017-05-30 oderfla

「我有這個html」 - 這不是HTML。這是一個Angular模板。你應該看看它生成的DOM。 – Quentin

['pattern'屬性]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern）是一個html5屬性。這確實是由瀏覽器處理的。 – Ivar

我很確定模式屬性在指定時需要包含正則表達式，這是一些瀏覽器可能顯示的內容。 –

添加此輸入字段：

oninvalid="setCustomValidity('Plz enter on Alphabets ')"

解決了這個問題。

來源

2017-06-01 11:55:20 oderfla

HTML 5工具提示集成在瀏覽器中顯示錯誤消息

回答

相關問題