angularjs - html 输入模式和 Angular ngPattern 之间的区别？

Question

我注意到一些开发人员正在使用 html 输入模式以 Angular 样式的形式进行验证:

<input id="email" name="email"
    type="text"
    ng-model="vm.contact.mail"
    pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
    required />

<span ng-show="!vm.contact.email.$error.required && 
    vm.contact.email.$error.pattern && 
    vm.contact.email.$dirty">
    Email is not in the correct format.</span>

它似乎与

ng-pattern="/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/"

这两种方式真的可以互换吗？在使用或性能方面，一个比另一个有什么优势/偏好吗？

Answer 1

表单验证

这两个选项都会触发表单验证，因为 ng-pattern 只是转换为模式(已测试)。

差异
ng-pattern 之间只有细微的差别和 pattern .根据文档 ng-pattern 还允许您传递在您的范围内定义的 Regexp 表达式。此外，ng-pattern 不会触发默认浏览器验证(红色边框，输入周围的错误消息)。

因此，您可以决定何时在您的应用程序中进行默认浏览器验证。

Example plunker显示两者都在行动。