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工具提示集成在浏览器中显示错误消息

回答

相关问题