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

Question

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

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

Internet Explorer

Google Chrome

Mozilla Firefox

这完全取决于他们处理HTML5的浏览器行为吗？是否可以在不编写大量代码的情况下对错误消息进行通用设计。

提前致谢

Answer 1

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

这样的事情：

<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>

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

请参阅：Angular Forms

并且：Angular Forms Validation

了解更多信息。