问题描述
尝试使用ng-pattern指令验证angularJs中的电子邮件ID字段。
Am trying to validate an Email id field in angularJs using ng-pattern directive.
但是AngularJ的新功能。一旦用户输入错误的邮件ID，我需要显示一条错误消息。
But am new to AngularJs. I need to show an error message as soon as the user enters the wrong email id.
我以下的代码正在尝试解决。帮助我使用ng-pattern获得正确的结果。
The code which I have below is am trying to solve. Help me out with using ng-pattern for getting the proper result.
<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>
推荐答案
如果要验证电子邮件，请使用输入类型=email而不是type =text。 AngularJS具有电子邮件验证开箱即用，因此无需使用ng-pattern。
If you want to validate email then use input with type="email" instead of type="text". AngularJS has email validation out of the box, so no need to use ng-pattern for this.
以下是原始文档中的示例：
Here is the example from original documentation:
<script>
function Ctrl($scope) {
$scope.text = '[email protected]';
}
</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>
有关详细信息，请阅读此文档：
For more details read this doc: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
实例：
UPD：
如果您对内置的电子邮件验证器不满意，并且想要使用您的自定义RegExp模式验证然后可以应用ng-pattern指令，并根据，可以显示错误消息：
If you are not satisfied with built-in email validator and you want to use your custom RegExp pattern validation then ng-pattern directive can be applied and according to the documentation the error message can be displayed like this:
<script>
function Ctrl($scope) {
$scope.text = '[email protected]';
$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：
这篇关于如何使用ng-pattern验证angularJs中的电子邮件ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！