大佬教程收集整理的这篇文章主要介绍了regex – 如何使用ng-pattern验证angularJs中的电子邮件ID,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
但是AngularJs是新的。我需要在用户输入错误的电子邮件ID时显示错误消息。
我下面的代码是我试图解决。帮助我使用Ng-pattern获得正确的结果。
<script type="text/javascript" src="/Login/script/ang.js"></script> <script type="text/javascript"> function Ctrl($scopE) { $scope.text = 'enter email'; $scope.word = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/; } </script> </head> <body> <form name="myform" ng-controller="Ctrl"> <input type="text" ng-pattern="word" name="email"> <span class="error" ng-show="myform.email.$error.pattern"> invalid email! </span> <input type="submit" value="submit"> </form> </body>
下面是原始文档的示例:
<script> function Ctrl($scopE) { $scope.text = 'me@example.com'; } </script> <form name="myForm" ng-controller="Ctrl"> Email: <input type="email" name="input" ng-model="text" required> <br/> <span class="error" ng-show="myForm.input.$error.required"> required!</span> <span class="error" ng-show="myForm.input.$error.email"> Not valid email!</span> <br> <tt>text = {{text}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valiD}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> <tt>myForm.$valid = {{myForm.$valiD}}</tt><br/> <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/> </form>
有关更多详细信息,请阅读此文档:https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
Live示例:http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info
UPD:
如果您对内置的电子邮件验证器不满意,并且要使用自定义的RegExp模式验证,则可以应用ng-pattern伪指令,根据documentation,错误消息可以显示如下:
<script> function Ctrl($scopE) { $scope.text = 'me@example.com'; $scope.emailFormat = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/; } </script> <form name="myForm" ng-controller="Ctrl"> Email: <input type="email" name="input" ng-model="text" ng-pattern="emailFormat" required> <br/><br/> <span class="error" ng-show="myForm.input.$error.required"> required! </span><br/> <span class="error" ng-show="myForm.input.$error.pattern"> Not valid email! </span> <br><br> <tt>text = {{text}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valiD}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> <tt>myForm.$valid = {{myForm.$valiD}}</tt><br/> <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> <tt>myForm.$error.pattern = {{!!myForm.$error.pattern}}</tt><br/> </form>
Plunker:https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ?p=preview
以上是大佬教程为你收集整理的regex – 如何使用ng-pattern验证angularJs中的电子邮件ID全部内容,希望文章能够帮你解决regex – 如何使用ng-pattern验证angularJs中的电子邮件ID所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。