AngularJS はフォーム validation_AngularJS を実装します-jsチュートリアル-php.cn

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

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

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" ng-controller="orderController">

{{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 に置き換えます。上記の例は次のようになります。

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

重複したコードがすべて削除されただけで、機能に変更はありません。 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);
                戻り値;
            })
        }
    }
})

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

复制代代码如下:

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