Angular JSでフォーム検証を実装する方法は？

検証は、 認証する ユーザー。それはのようなすべてのWebテクノロジーで使用されています そして 。しかし、今日は、AngularJSでの検証に次の順序で焦点を当てます。

• フォーム検証とは何ですか？
• AngularJSでのフォーム検証
• フォーム検証の手順
• コード

フォーム検証とは何ですか？

フォームの検証は、HTMLフォームを検証するための手法です。ユーザーがHTMLフォームを持っていて、HTMLフォームに異なるフィールドがあると仮定する簡単な例を見てみましょう。これらのフィールドは、フォームを検証するときにフォームバリデーターによって検証されます。バリデーター式を使用して特定のフィールドの値を確認する必要があります。 。

正規表現とフィールド値が同じである場合、フォームが検証されていると言えます。 HTMLフォームには、電子メール、必須、最小、最大、パスワードなど、さまざまな種類の検証があります。

AngularJSでのフォーム検証

AngularJSでフォームを検証する方法について説明しましょう。 Angular JSは、フォームを検証したり、フォームからデータを取得したりするために使用できるさまざまなタイプのフォーム検証プロパティを提供します。

• $ valid ：このプロパティは、適切なルールを適用することにより、フィールドが有効かどうかを示します。

• $無効 ：名前が無効と言っているように、このタイルは天候が無効であるか、適切なルールに基づいていません。

• $ pristine ：入力フィールドが使用されていない場合はtrueを返します。

  
  
  

  Javaプログラムを終了する方法

• $汚れた ：入力フィールドが使用されているフォームでtrueを返します。

• $ touched ：入力がぼやけている場合はBooleanTrue。

フォームにアクセスするには： 。

入力にアクセスするには： ..

次に、Angular JSでのフォーム検証について例を挙げて説明しましょう。まず、2つのファイルを作成します。1つはapp.jsで、もう1つはindex.htmlです。 index.htmファイルには角度検証を含む単純なHTMLフォームが含まれ、app.jsファイルにはindex.htmlページでフォーム検証を処理するためのバックエンドコードが含まれています。

Javaのrmiとは

ザ・index.htmlページコンテンツフォームnovalidateプロパティとそれは正確にはどういう意味ですか？

formタグのnovalidateプロパティは、カスタムフォーム検証を使用できることをHTMLに通知します。 novalidateプロパティを指定しない場合、HTMLフォームはHTML5のデフォルトのフォーム検証プロパティを使用して検証されます。

フォーム検証の手順

フォームでは、フォームに6つのフィールドを作成しました。これらは、名、姓、電子メール、電話、パスワード、およびメッセージです。

1. まず、必須フィールドバリデーターを追加します。このバリデーターは、特定のフィールドが必須であることをユーザーに通知します。

2. 次はメールフィールドです。ユーザーが有効なメールを送信しない場合、メールバリデーターはメール検証エラーをスローします。

3. パスワード検証で最小長と最大長を設定しました。最小長は5、最大長は8であるため、ユーザーは5〜8文字の有効なパスワードを入力できます。

4. 最後に、必要な電話とメッセージフィールドを設定し、具体的には、提出された電話に番号検証を適用します。

AngularJSでのフォーム検証のコード

index.html

角度スコープの例名 
 
この提出が必要です
苗字 
 
この提出が必要です
Eメール 
 
この提出が必要です
 
有効なメールではありません
電話 
 
この提出が必要です
 
これは有効な電話ではありません
パスワード 
 
この提出が必要です
 
5〜8文字のパスワード
メッセージ 
 
この提出が必要です
ssisチュートリアルステップバイステップ
参加する

app.js

var app = angle.module（ 'ngValidApp'、[]）app.controller（ 'ngValidController'、function（$ scope）{}）

フォームで使用される検証ディレクティブについて説明しましょう。

• ng-必須 ： 必須フィールドを提供するため
• ng-show ： 条件に基づいてエラーメッセージを表示するには（検証プロパティを確認してください）
• 最小長の ： 最小の長さを提供するため
• ng-maxlength ： 最大長を提供するため
• のパターン ： 特定のパターンに一致させる
• ng-model ： $ error、$ validなどの検証プロパティでフィールドをバインドします。

これで、AngularJSでのこの検証の記事は終わりです。 AngularJSでのフォーム検証で考慮すべきさまざまなことを理解していただければ幸いです。

Angularフレームワークについて詳しく知りたい場合は、 インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングは、Angularを深く理解し、主題をマスターするのに役立ちます。

質問がありますか？この記事のコメントセクションにその旨を記載してください。折り返しご連絡いたします。