Javascript 浏览器对于HTML5表单错误消息的行为不同

我已经创建了一个登录页面。它有一个带有用户名和密码字段的表单。用户名应为电子邮件类型的文本文件，密码应为需要满足正则表达式模式的密码类型的文本文件

一切正常。我面临的问题是，当用户输入无效用户名时，错误消息在不同浏览器中显示的方式不同，如下所示

Internet Explorer

谷歌浏览器

Mozilla Firefox

这完全取决于浏览器处理HTML5的方式吗？是否可以在不编写太多代码的情况下对错误消息进行通用设计

---

提前感谢

我认为您无法修改默认行为，但可以使用角度验证

大概是这样的：

<form name="signUpForm">
            <div>
                <input name="email" type="email" required autocomplete="off" ng-model="formData.Email" />
                <div class="error-message" ng-show="signUpForm.email.$error.required">UserName is required</div>
                <div class="error-message" ng-show="signUpForm.email.$error.email">Not Valid Email</div>
            </div>
        </form>

用户名是必需的
无效电子邮件

然后，您可以根据需要自定义错误消息类。 为了仅在发布表单时显示消息，需要进行一些修改，但您可以理解

见此：

这是：

---

更多信息。

根据经验，我可以告诉您，每个浏览器都有自己的错误消息，但我不知道您是否可以覆盖它们的消息。这取决于浏览器。如果要在通用设计中显示，则需要使用角度验证方式ttps://docs.angularjs.org/guide/forms （如果您使用的是angularjs）或使用第三方表单验证插件。保证通用设计的唯一方法是自己实现验证。但我必须问，这真的是个问题吗？大多数人使用并坚持使用一个浏览器，他们将习惯于本机错误消息的外观。您使用css框架（如bootstrap）并在所有浏览器中获得类似的外观，JavaScript方法可能会帮助您！