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

Question

我是 Angular 的新手，无法根据 REGEX 使用 ng-pattern 验证电子邮件地址。事实上，电子邮件的其他默认 Angular 验证也会改变行为，并且只有在我插入 ng-pattern 时整个字段为空时才会显示错误。最初尝试使用指令和 Controller ，但发现 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 以匹配此正则表达式:

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

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

希望能帮助到你。