angularjs – html输入模式和角度ngPattern之间的区别？

发布时间：2020-12-17 17:49:35 所属栏目：安全来源：网络整理

导读：我注意到一些开发人员正在使用html输入模式进行角度样式的验证： 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.re

我注意到一些开发人员正在使用html输入模式进行角度样式的验证：

<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,}$/"

这两种方式确实可以互换吗？在使用或性能方面,是否有任何优势/偏好？

解决方法

表格验证

两个选项都将触发表单验证,因为ng-pattern只是转换为模式(已测试).

区别

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

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

Example plunker显示两者都在行动中.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!