AngularJS はフォーム validation_AngularJS を実装します

私はフロントエンド プログラマーではありませんが、フロントエンドで検証を行うことがいかに重要であるかは理解しています。

この方法でバックエンドは一息つき、バックエンドと比較してフロントエンドは実際にユーザーの幸福度を向上させることができるからです。

AngularJS は非常に便利なフォーム検証機能を提供します。これはここに記録されています。

まず次のコードから始めます

コードをコピーします コードは次のとおりです:

メール:


メールアドレスは必須です。
メール アドレスが無効です。
                                                                                       

angular.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
$scope.user = 'Kavlez';
$scope.email =
'sweet_dreams@aliyun.com'; }]);

入力タグのいくつかの検証オプション。通常は HTML5 タグと組み合わせて使用​​されます。

必須

長さ

コマンド ng-minlength/ng-maxlength を使用します

特定の形式
たとえば、電子メール、URL、番号など、タイプを対応するタイプに設定するだけです。例:

コードをコピーします コードは次のとおりです:

パターンマッチング

ディレクティブ ng-pattern を使用します。例:

コードをコピーします コードは次のとおりです:

フォーム上での操作を容易にするフォームのプロパティ

きれい/汚い

など、変更されているかどうかを示します。

コードをコピーします コードは次のとおりです:

{{mainForm.userEmail.$pristine}}
{{mainForm.userEmail.$dirty}}

formName.fieldName.$pristine モードでアクセスするには、入力に ng-model 宣言が必要です。

コードをコピーします コードは次のとおりです:

有効/無効

は検証に合格したかどうかを示します。

コードをコピーします コードは次のとおりです:

$error

フォーム検証情報。検証が失敗した場合、対応する情報が返されます。

AngularJS はフォームステータスに対応する CSS クラスを提供します

コードをコピー コードは次のとおりです:

.ng-pristine
.ng-ダーティ
.ng-valid
.ng-無効

たとえば、検証の合格を緑、失敗を赤にします:

コードをコピーします コードは次のとおりです:

input.ng-valid {
色: 緑;
}
input.ng-invalid {
色: 緑;
}

上記の例では、電子メール検証が 1 つだけ記述されています。複数のフィールド、複数の異なるプロンプト、および複数のイベントを追加すると、コードが複雑になります。

これは実際には推奨されません。もっと良い方法があります。
angular-messages.js

を使用するだけです

まず、この 2 つのステップを忘れないでください

コードをコピーします コードは次のとおりです:

angular.module('myApp', ['ngMessages'])

まず、これらの重複を ng-messages と ng-message に置き換えます。上記の例は次のようになります。

コードをコピーします コードは次のとおりです:

メール:
type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" 必須 />

＆lt; p class = "error" ng-message = "rebys"＆gt;電子メールが必要です

メール アドレスが無効です。

最小長 10

最大長 50

                                                                                       

重複したコードがすべて削除されただけで、機能に変更はありません。 ng-messasges と ng-message の区別に注意してください。これは with() に似ていますか? ここでは、複数のプロンプトを同時に表示するために次の ng-messages-multiple が使用されています。

しかし、これではまだ不十分です。ng-message の内容を省略しても、必要な検証が複数のフィールドに存在する場合は重複が発生します。

さらに、異なるページのフォームがすべて同じ内容を含む場合、確認を求めるプロンプトが繰り返し表示されることになります。

この問題を解決するには、ng-messages-include ディレクティブを使用します。
このディレクティブは、テンプレートを参照するために使用されます。たとえば、上記の例は次のようになります。

コードをコピーします コードは次のとおりです:

メール:

type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" 必須 />

                                                                                       

フォーム>

複雑ではないので、さらにいくつかのことを追加しましょう。
プロンプトをより親しみやすくするために (?)、カーソルが離れた後にプロンプ​​トが表示される効果を実現してみます。
このとき、ディレクティブを使用するとさらに便利になります。 ここでは、最初にディレクティブに関連する内容について触れます。

まず実行しましょう:

コードをコピーします コードは次のとおりです:

var myApp = angular.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
$scope.user = 'Kavlez';
$scope.email = 'sweet_dreams@aliyun.com';
}])
.directive('hintOnBlur', [function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.focused = false;
element.bind('focus', function(evt) {
scope.$apply(function() {ctrl.focused = true;});
}).bind('blur', function(evt) {
scope.$apply(function() {ctrl.focused = false;});
});
}
}
}]);

ここでは、カーソルが特定の属性上にあるかどうかを判断するためにフォーカスを使用しています。

それに伴いフォームも変更されますので、利用方法は以下の通りとなります。

コードをコピーします コードは次のとおりです:

メール:

                                                                                       

フォーム>

ng-showにfocusedの判定を追加し、falseの場合にプロンプ​​トが表示されるようにします。

今はそんな感じです。

検証方法と有効性をカスタマイズします。これにもディレクティブが使用されます。
入力した電子メール アドレスが既に使用されているかどうかを確認します。次に、簡単なシミュレーションを示します。

コードをコピー コードは次のとおりです:

.directive('isAlreadyTaken', function() {
    戻り値 {
        必要: 'ngModel',
        リンク: function(scope, ele, attrs, ctrl) {
            ctrl.$parsers.push(function(val) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com'、
                    'a@gmail.com'、
                    'v@gmail.com'、
                    'l@gmail.com'、
                    'e@gmail.com'、
                    'z@gmail.com'];
                for (var i=0;i                     if(val==emailTable[i])
                        戻る;
                ctrl.$setValidity('emailAvailable', true);
                戻り値;
            })
        }
    }
})

入力要素中に追加されたプロパティはすでに取得されており、メッセージをさらに追加します:

复制代 代码如下:

すでに取得されています。他のメール アドレスを試してください!