web-dev-qa-db-ja.com

ng-patternを使用してAngularJSでメールを検証する

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

私はいくつかのREGEXパターンを使用し、次のようなng-patternについて読みました： ng-patternのRegex検証フォーム検証簡単なフォーム検証 そして多く他のリンクが機能しません。誰かが物事を機能させるために私が何をする必要があるかを理解できますか？

  <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="[email protected]" 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>
angularjsformsvalidationng-pattern
4
Afshin Ghazi

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

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

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

それが役に立てば幸い。

9
ashfaq.p

正規表現に誤りがあります。私はこの単純な電子メールバリデーターを使用しましたが、適切なエラーを表示するためにいくつかの変更を加えるだけで正常に機能しました

<div class="row">
  <div class="large-12 medium-12 small-12 columns">
      <label>Username</label>
          <input type="email" name="username" placeholder="[email protected]" 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>
2
Narendra CM

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

2
Afshin Ghazi