Question

我是Angular的新手，无法根据REGEX获取ng-pattern来验证电子邮件地址。实际上，电子邮件的其他默认角度验证也会更改行为，并且如果在插入ng-pattern时整个字段为空，则仅显示错误。最初尝试使用指令和控制器，但发现ng-pattern可以实现（理论上）验证电子邮件的相同效果，因此决定使用它。

我使用了几种REGEX模式并阅读了关于ng-pattern的内容，例如来自：Regex validation of ng-pattern Form validation Easy 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

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

$html = '';
$html .= '<div class="panel-body">';
$html .= $dec;
$html .= ($ttype == "video")?'<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/'.$only_id[1].'" frameborder="0" allowfullscreen=""></iframe>':'<!-- else part -->';
$html .= '</div>';
echo $html;

如果ng-pattern = '/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i'之后的部分留空，则此正则表达式会出错。此正则表达式也将接受@。

希望它有所帮助。

Answer 2

正则表达式出错。我使用了这个简单的电子邮件验证器，并且只需很少的更改即可正常显示正确的错误

<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 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 />

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

3 个答案: