4

私は Angular を初めて使用し、ng-pattern を取得して REGEX に基づいて電子メール アドレスを検証するのに問題があります。実際、電子メールの他のデフォルトの角度検証も動作を変更し、ng-pattern を挿入したときにフィールド全体が空の場合にのみエラーを表示します。最初はディレクティブとコントローラーを使用しようとしましたが、ng-pattern が (理論的には) 電子メールの検証と同じ効果を達成できることがわかったので、これを使用することにしました。

私はいくつかのREGEXパターンを使用し、次のような 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>
4

3 に答える 3

9

この正規表現に一致するように ng-pattern を変更してください:

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

この正規表現は、後のセクションを@空白のままにするとエラーになります。この正規表現も受け入れunicodeます。

それが役に立てば幸い。

于 2016-02-11T06:24:27.917 に答える
2

問題は私の正規表現にありました。私は最終的に使用しました：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 />

于 2016-02-11T07:14:04.440 に答える