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

Question

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

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

IE浏览器

谷歌浏览器

火狐浏览器

这完全取决于浏览器处理 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 Validation

了解更多信息。