我正在尝试使用 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>
最佳答案
如果您想验证电子邮件，请使用 type="email"而不是 type="text"的输入。 AngularJS 具有开箱即用的电子邮件验证功能，因此无需为此使用 ng-pattern。
以下是原始文档中的示例:
<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
实例:http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info
更新:
如果您对内置电子邮件验证器不满意，并且想要使用自定义 RegExp 模式验证，则可以应用 ng-pattern 指令并根据 documentation错误消息可以这样显示:
The validator sets the pattern error key if the ngModel.$viewValue does not match a RegExp
<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>
关于regex - 如何使用 ng-pattern 验证 angularJs 中的电子邮件 ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24490668/