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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

1 か月前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7612

15

CakePHP チュートリアル

1387

52

Steamのアカウント名の形式は何ですか

88

11

Win11 Activation Key Permanent

68

19

NYTの接続はヒントと回答です

29

136

もっと見る

Related knowledge

PHPでCodeIgniter4フレームワークを使用するにはどうすればよいですか? May 31, 2023 pm 02:51 PM

PHP は非常に人気のあるプログラミング言語であり、CodeIgniter4 は一般的に使用される PHP フレームワークです。 Web アプリケーションを開発する場合、フレームワークを使用すると、開発プロセスのスピードアップ、コードの品質の向上、メンテナンス コストの削減が可能になり、非常に役立ちます。この記事ではCodeIgniter4フレームワークの使い方を紹介します。 CodeIgniter4 フレームワークのインストール CodeIgniter4 フレームワークは、公式 Web サイト (https://codeigniter.com/) からダウンロードできます。下

Flask-WTF を使用してフォーム検証を実装する方法 Aug 03, 2023 pm 06:53 PM

Flask-WTF を使用してフォーム検証を実装する方法 Flask-WTF は、Web フォーム検証を処理するための Flask 拡張機能であり、ユーザーが送信したデータを検証するための簡潔かつ柔軟な方法を提供します。この記事では、Flask-WTF 拡張機能を使用してフォーム検証を実装する方法を説明します。 Flask-WTF のインストール Flask-WTF を使用するには、まずインストールする必要があります。 pip コマンドを使用してインストールできます。 pipinstallFlask-WTF 必要なモジュールを F にインポートします。

Laravel 開発: Laravel Validation を使用してフォームリクエストを検証する方法? Jun 13, 2023 pm 01:34 PM

Laravel は、開発者の作業をスピードアップするための便利な機能を多数提供する人気の PHP Web 開発フレームワークです。その中でも、LaravelValidation は、フォームリクエストやユーザーが入力したデータを簡単に検証するのに役立つ非常に実用的な関数です。この記事では、LaravelValidation を使用してフォームリクエストを検証する方法を紹介します。 LaravelValidationとはLaravelValidationとはLa

Laravelでミドルウェアを使用してフォーム検証を処理する方法 Nov 02, 2023 pm 03:57 PM

ミドルウェアを使用して Laravel でフォーム検証を処理する方法、特定のコード例が必要です はじめに: フォーム検証は Laravel で非常に一般的なタスクです。ユーザーが入力したデータの有効性と安全性を確保するために、当社は通常、フォームに送信されたデータを検証します。 Laravel は便利なフォーム検証機能を提供しており、フォーム検証を処理するためのミドルウェアの使用もサポートしています。この記事では、ミドルウェアを使用してLaravelでフォーム検証を処理する方法を詳しく紹介し、具体的なコード例を示します。

Golang を使用して Web アプリケーションのフォーム検証を実装する方法 Jun 24, 2023 am 09:08 AM

フォーム検証は Web アプリケーション開発において非常に重要なリンクであり、フォーム データを送信する前にデータの有効性をチェックして、アプリケーションのセキュリティ脆弱性やデータ エラーを回避できます。 Web アプリケーションのフォーム検証は、Golang を使用すると簡単に実装できます。この記事では、Golang を使用して Web アプリケーションのフォーム検証を実装する方法を紹介します。 1. フォーム検証の基本要素 フォーム検証の実装方法を紹介する前に、フォーム検証の基本要素が何であるかを知る必要があります。フォーム要素: フォーム要素は

PHP フォーム検証のヒント: filter_input 関数を使用してユーザー入力を検証する方法 Aug 01, 2023 am 08:51 AM

PHP フォーム検証のヒント: filter_input 関数を使用してユーザー入力を検証する方法 はじめに: Web アプリケーションを開発する場合、フォームはユーザーと対話するための重要なツールです。ユーザー入力を正しく検証することは、データの整合性とセキュリティを確保するための重要な手順の 1 つです。 PHP には、ユーザー入力を簡単に検証してフィルタリングできる filter_input 関数が用意されています。この記事では、filter_input 関数を使用してユーザー入力を検証する方法を紹介し、関連するコード例を示します。 1つ、

PHP でのフォーム検証とフィルタリングの方法は? Jun 29, 2023 pm 10:04 PM

PHP は Web 開発で広く使用されているスクリプト言語であり、そのフォーム検証とフィルタリングは非常に重要な部分です。ユーザーがフォームを送信するとき、データのセキュリティと有効性を確保するために、ユーザーが入力したデータを検証およびフィルタリングする必要があります。この記事では、PHP でフォームの検証とフィルタリングを実行する方法とテクニックを紹介します。 1. フォーム検証 フォーム検証とは、ユーザーが入力したデータをチェックして、データが特定のルールおよび要件に準拠していることを確認することを指します。一般的なフォーム検証には、必須フィールド、電子メール形式、携帯電話番号形式の検証が含まれます。

入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル Jun 15, 2017 pm 05:50 PM

Javascript は、コードの構成、コードのプログラミング パラダイム、およびオブジェクト指向理論の点で非常にユニークな言語です。しかし、JavaScript が 20 年間主流であったとはいえ、jQuery、Angularjs、さらには React などの人気のあるフレームワークを理解したい場合は、「Black Horse Cloud Classroom JavaScript Advanced Framework」を見てください。デザインビデオチュートリアル」。

See all articles