16

Angular が type=email の入力を検証する方法を無効にする、または少なくとも変更するにはどうすればよいでしょうか?

現在、type=email を使用すると、Angular は本質的に二重検証を行います。ブラウザ (この場合は Chrome) が電子メールを検証し、angular も同様に検証します。それだけでなく、Chrome で有効なものはAngularjsでは有効foo@barではありません。

私が見つけることができる最高のものはですがng-pattern、 Angular の電子メール検証を置き換える代わりに、入力タイプの3 番目のパターン検証をng-pattern追加するだけです。へー

何か案は？

4

5 に答える 5

9

注: これは angular 1.2.0-rc.3 の例です。他のバージョンでは動作が異なる場合があります

他の人が述べているように、角度のデフォルトの入力検証をオフにするのは少し複雑です。入力要素に独自のディレクティブを追加し、そこで処理する必要があります。セルゲイの答えは正しいですが、要素に複数のバリデーターが必要で、組み込みのバリデーターを起動したくない場合は、いくつかの問題が発生します。

必要なバリデーターが追加されたメールフィールドを検証する例を次に示します。何が起こっているのかを説明するために、コードにコメントを追加しました。

入力要素

<input type="email" required>

指令

angular.module('myValidations', [])

.directive('input', function () {
  var self = {
      // we use ?ngModel since not all input elements 
      // specify a model, e.g. type="submit" 
      require: '?ngModel'
      // we need to set the priority higher than the base 0, otherwise the
      // built in directive will still be applied
    , priority: 1
      // restrict this directive to elements
    , restrict: 'E'
    , link: function (scope, element, attrs, controller) {
        // as stated above, a controller may not be present
        if (controller) {

          // in this case we only want to override the email validation
          if (attrs.type === 'email') {
            // clear this elements $parsers and $formatters
            // NOTE: this will disable *ALL* previously set parsers
            //       and validators for this element. Beware!
            controller.$parsers = [];
            controller.$formatters = [];

            // this function handles the actual validation
            // see angular docs on how to write custom validators
            // http://docs.angularjs.org/guide/forms
            //
            // in this example we are not going to actually validate an email
            // properly since the regex can be damn long, so apply your own rules
            var validateEmail = function (value) {
              console.log("Validating as email", value);
              if (controller.$isEmpty(value) || /@/.test(value)) {
                controller.$setValidity('email', true);
                return value;
              } else {
                controller.$setValidity('email', false);
                return undefined;
              }
            };

            // add the validator to the $parsers and $formatters
            controller.$parsers.push(validateEmail);
            controller.$formatters.push(validateEmail);
          }
        }
      }
  };
  return self;
})

// define our required directive. It is a pretty standard
// validation directive with the exception of it's priority.
// a similar approach must be take with all validation directives
// you would want to use alongside our `input` directive
.directive('required', function () {
  var self = {
      // required should always be applied to a model element
      require: 'ngModel'
    , restrict: 'A'
      // The priority needs to be higher than the `input` directive
      // above, or it will be removed when that directive is run
    , priority: 2
    , link: function (scope, element, attrs, controller) {
        var validateRequired = function (value) {
          if (value) {
            // it is valid
            controller.$setValidity('required', true);
            return value;
          } else {
            // it is invalid, return undefined (no model update)
            controller.$setValidity('required', false);
            return undefined;
          }

        };
        controller.$parsers.push(validateRequired);
      }
  };
  return self;
})
;

そこにあります。type="email"入力の検証を制御できるようになりました。ただし、適切な正規表現を使用してメールをテストしてください。

注意すべきことの 1 つは、この例validateEmailでは の前に実行されることvalidateRequiredです。他の検証の前に実行する必要がある場合はvalidateRequired、それを$parsers配列の先頭に追加します (unshiftの代わりに使用しますpush)。

于 2013-10-22T19:57:47.873 に答える
8

とてもシンプルです。ビジネス要件に合わせて電子メールの正規表現を変更する必要があったため、電子メールの正規表現をカスタマイズ可能にするこのディレクティブを作成しました。基本的に、元のバリデーターをカスタムのバリデーターで上書きします。すべての $parsers と $formatters をいじる必要はありません (何か不足していない限り)。だから私の指示はこれでした...

module.directive('emailPattern', function(){
    return {
        require : 'ngModel',
        link : function(scope, element, attrs, ngModel) {

            var EMAIL_REGEX = new RegExp(attrs.emailPattern, "i");

            ngModel.$validators["email"] = function (modelValue, viewValue) {
                var value = modelValue || viewValue;
                return ngModel.$isEmpty(value) || EMAIL_REGEX.test(value);
            };
        }
    }
});

次に、個人的に必要な電子メール パターンを指定して、次のように使用します。

<input type="email" email-pattern=".+@.+\..+"/>

ただし、永久に無効にしたい場合は、これを行うことができます。

module.directive('removeNgEmailValidation', function(){
    return {
        require : 'ngModel',
        link : function(scope, element, attrs, ngModel) {
            ngModel.$validators["email"] = function () {
                return true;
            };
        }
    }
});

そしたらこんな使い方…

<input type="email" remove-ng-email-validation>
于 2014-09-11T02:43:52.007 に答える
7

HTML5 では、フォームの属性novalidateを使用してブラウザーの検証を無効にすることができます。

<form novalidate>
    <input type="email"/>
</form>

angularjs でカスタム バリデーターを作成する場合は、ここに良いチュートリアルと例があります: http://www.benlesh.com/2012/12/angular-js-custom-validation-via.html

于 2013-01-18T23:58:14.207 に答える
4

nfiniteloopをエコーすると、をいじったり、デフォルトのバリデーターをオーバーライドし$parsersたりする必要はありません。Angular 1.3 docs$formattersで参照されているように、 $validators オブジェクトは ngModelController でアクセスできます。カスタム ディレクティブを使用すると、さまざまな電子メール検証関数を必要な数だけ記述して、必要な場所で呼び出すことができます。

これは、 tutsからの非常に優れた標準的な電子メール形式の正規表現を使用したものです。今すぐ使用する必要がある 8 つの正規表現(おそらく Angular のデフォルトである idk と同じです)。 

var app = angular.module('myApp', []);

app.directive('customEmailValidate', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {

      var EMAIL_REGEXP = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

      ctrl.$validators.email = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }

        if (EMAIL_REGEXP.test(viewValue)) {
          // it is valid
          return true;
        }

        // it is invalid
        return false;
      };
    } 
  };
});

検証を完全に削除するものを次に示します。

var app = angular.module('myApp', []);

app.directive('noValidation', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.email = function(modelValue, viewValue) {
        // everything is valid
        return true;
      };
    } 
  };
});

マークアップで使用するには:

<!-- 'test@example.com' is valid, '@efe@eh.c' is invalid -->
<input type="email" custom-email-validate>

<!-- both 'test@example.com' and '@efe@eh.c' are valid -->
<input type="email" no-validation>
于 2015-02-22T03:34:50.047 に答える
2

私のプロジェクトでは、次のようなことを行います（カスタムディレクティブは、angularjsによってインストールされたものを含む他のすべての検証を消去します）：

angular.module('my-project').directive('validEmail', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl){
            var validator = function(value){
                if (value == '' || typeof value == 'undefined') {
                    ctrl.$setValidity('validEmail', true);
                } else {
                    ctrl.$setValidity('validEmail', /your-regexp-here/.test(value));
                }
                return value;
            };

            // replace all other validators!
            ctrl.$parsers = [validator];
            ctrl.$formatters = [validator];
        }
    }
});

使用方法 (novalidateブラウザの検証をオフにする必要があることに注意してください):

<form novalidate>
    <input type="email" model="email" class="form-control" valid-email>
于 2013-09-13T08:20:47.947 に答える