在 AngularJS 中使用 ng-pattern 验证电子邮件

Question

我是 Angular 的新手，在使用 ng-pattern 来验证基于正则表达式的电子邮件地址时遇到了问题。事实上，电子邮件的其他默认 angular 验证也会更改行为，并且仅在我插入 ng-pattern 时整个字段为空时才显示错误。最初尝试使用指令和控制器，但发现 ng-pattern 可以实现（理论上）验证电子邮件的相同效果，因此决定使用它。

我使用了几种 REGEX 模式并阅读了有关 ng-pattern 的信息，例如来自：Regex validation of ng-patternForm validationEasy form validation 和许多其他链接，但没有任何效果。任何人都可以弄清楚我需要做什么才能使事情正常进行吗？

  <form name="userForm" novalidate>
    <div class="row">
                    <div class="large-12 medium-12 small-12 columns">
                        <label>Username</label>
                            <input type="email" name="username" placeholder="johnsmith@ashburton.com" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern = "/^(?("")("".+?(?<!\)""@)|(([0-9a-z]((\.(?!\.))|[-!#$%&'*\+/=\?\^`\{\}\|~\w])*)(‌?<=[0-9a-z])@))(?([)([(\d{1,3}\.){3}\d{1,3}])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-‌z0-9][\-a-z0-9]{0,22}[a-z0-9]))$/" required />
                            <div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$invalid">
                              <small class="error" ng-show="userForm.username.$error.required">
                                     Your email is required.
                              </small>
                              <small class="error" ng-show="userForm.username.$error.email">
                                     Please input a valid email.
                              </small>
                              <small class="error" ng-show="userForm.firstname.$error.maxlength">
                                    Your email cannot be longer than 100 characters
                              </small>                        
                            </div>
                    </div>
</form>

Answer 1

您的正则表达式有误。我使用了这个简单的电子邮件验证器，它运行良好，只需进行少量更改即可显示正确的错误

<div class="row">
  <div class="large-12 medium-12 small-12 columns">
      <label>Username</label>
          <input type="email" name="username" placeholder="johnsmith@ashburton.com" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern="/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/" required />
          <div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$error"> 
            <small class="error" ng-show="userForm.username.$error.required">
                   Your email is required.
            </small>
            <small class="error" ng-show="userForm.username.$error.pattern">
                   Please input a valid email.
            </small>
            <small class="error" ng-show="userForm.username.$error.maxlength">
                  Your email cannot be longer than 100 characters
            </small>                        
          </div>
  </div>
</div>

Answer 2

请更改您的 ng 模式以匹配此正则表达式：

ng-pattern = '/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i'

如果 @ 之后的部分留空，此正则表达式将出错。此正则表达式也将接受 unicode。

希望对您有所帮助。

Answer 3

问题出在我的正则表达式中。我最终使用了：ng-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,}))$/' required />

在 AngularJS 中使用 ng-pattern 验证电子邮件

Using ng-pattern to validate email in AngularJS

forms

validation

angularjs

ng-pattern