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

我已创建登录页面。它有一个带有用户名和密码字段的表单。用户名应该是一个带有电子邮件的文本字段，并且密码将是一个需要满足正则表达式模式的带有类型密码的文本字段。对于HTML5表单错误消息，浏览器的行为不同

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

的Internet Explorer

谷歌浏览器

Mozilla Firefox浏览器

这是完全依赖浏览器行为处理HTML5的方式吗？是否有可能在不编写大量代码的情况下为错误消息设计一个通用的设计。

在此先感谢

来源

2016-12-13 Shareer

根据经验我可以告诉你，每个浏览器都有它自己的错误消息，但我不知道你是否可以重写他们的消息。 – Tapaka

这取决于浏览器。如果你想在通用设计中显示，你需要使用角度表单验证ttps：//docs.angularjs.org/guide/forms（如果你使用的是angularjs）或者使用第三方表单验证插件。 –

保证通用设计的唯一方法是自己实现验证。但我必须问，这是否真的有问题？大多数人使用和坚持一个浏览器，他们会习惯看本地错误信息。 – Ankh

我认为你不能修改默认行为，但你可以使用角度验证了点。

事情是这样的：

<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

获取更多信息。

来源

2016-12-13 09:56:22

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

回答

相关问题