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

Question

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

我已经使用了几种REGEX模式并阅读了关于ng-pattern的内容,例如:来自ng-pattern 表单验证的正则表达式验证简单表单验证和许多其他链接但没有任何作用.任何人都可以弄清楚我需要做些什么才能让事情发挥作用？

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

希望能帮助到你.