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

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

メール:
<入力
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);
                戻り値;
            })
        }
    }
})

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

复制代 代码如下:

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：マウスの左、中、右のどのボタンがクリックされたかを判断するための js メソッド_JavaScript スキル次の記事：マウスの左、中、右のどのボタンがクリックされたかを判断するための js メソッド_JavaScript スキル

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved