角度1.3的电子邮件验证

时间:2016-08-31 04:54:21

标签: javascript angularjs validation angularjs-directive angularjs-scope

我有一个包含几个文本框和一个提交按钮的表单。其中一个文本框是电子邮件。我使用的是角度,下面是我从这个引用中找到的代码 - http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=preview

<form name="inviteUserForm" ng-submit="inviteUser(inviteUserForm.$valid)" novalidate>
  Email: <input type="email" name="input" ng-model="text" required>
  <br>
  <span class="error" ng-show="inviteUserForm.input.$error.required">
    Required!
  </span>
  <span class="error" ng-show="inviteUserForm.input.$error.email">
    Not a valid email!
  </span>
  <br>
  <button type="submit" class="btn btn-default btn-primary btn-shaded ng-scope" ng-disabled="sending" translate="">Send Invite</button>
</form>

现在,就像链接中的演示一样,它允许某些项目作为有效的电子邮件地址,例如 - :

me @ ex =是一个有效的emailId me@ex.c =是有效的emailId

问题是当我点击提交上面的电子邮件时,它永远不会发送到电子邮件地址(因为emailId无效)。

我很感激任何反馈。

更新 - :

感谢您的评论。根据您的反馈,我已经更新了我的代码以立即使用ng-pattern。以下是使用ng-pattern的实际代码的屏幕截图。

enter image description here

仍有同样的问题。

2 个答案:

答案 0 :(得分:0)

像这样使用ng-pattern

<input type="email" name="input" ng-model="text" ng-pattern="/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/" required&gt;

添加一个 span

<span class="error" ng-show="inviteUserForm.input.$error.pattern">
    Invalid email address. !
</span>

答案 1 :(得分:0)

控制器中的

dicts

在你的html页面

function validate() {
$scope.isValidEmail = false;
                  var pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                  if ($scope.text) {
                      if (!pattern.test($scope.text)) {
                          $scope.isValidEmail = true;
                      } else {
                          $scope.isValidEmail= false;
                      }
                  }
 }