AngularJs フォーム検証メソッド-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

AngularJs フォーム検証メソッド

一个新手

Oct 19, 2017 am 09:25 AM

angularjsjavascript方法

Anjuularjs Form Validation

ユーザーがフォームに入力した内容に基づいて、リアルタイムで視覚的なフィードバックを提供できることは非常に重要です。人間対人間のコミュニケーションのコンテキストでは、フォーム検証によって与えられるフィードバックは、正しい入力を取得することと同じくらい重要です。

フォーム検証は、ユーザーに有益なフィードバックを提供するだけでなく、悪意のある入力や誤った入力による損傷から Web アプリケーションを保護します。 Web フロントエンドのバックエンドを保護するために最善を尽くす必要があります。

AngularJSはHTML5のフォーム検証機能と独自の検証命令を組み合わせることができ、とても便利です。 AngularJS は、多くのフォーム検証命令を提供します。

<form name="form" novalidate>
    <label name="email">Your email</label>
    <input type="email" name="email" ng-model="email" placeholder="Email Address"/></form>

フォーム検証を使用するには、まずフォームに上記の例のように name 属性があることを確認します。

すべての入力フィールドは、最大長と最小長などの基本的な検証を実行できます。これらの機能は、新しい HTML5 フォーム属性によって提供されます。

フォームに対するブラウザのデフォルトの検証動作をブロックしたい場合は、form要素にnovalidateタグを追加できます

1.必須

フォーム入力が入力されたかどうかを確認するには、次のように入力します。入力フィールド要素に必要な HTML5 タグを追加するだけです:

注: 必須属性は次の <input> タイプに適用されます: テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、数値、チェックボックス、ラジオとファイル

<input>

2. 最小長 ng-minleng="{number}"

フォーム入力のテキスト長が特定の最小値より大きいかどうかを確認するには、AngularJS ディレクティブを使用します。入力フィールドの ng-minleng="{number}"

<input type="text" ng-minlength="5" />

3. 最大長 ng-maxlength="{number}"

フォーム入力のテキストの長さが以下であるかどうかを確認するには特定の最大値に等しい場合は、入力フィールド {number}" で AngularJS ディレクティブ ng-maxlength=" を使用します

<input type="text" ng-maxlength="20" />

4. パターンマッチング ng-pattern="/PATTERN/"

ng- を使用しますpattern="/PATTERN/" を使用して、入力が指定された正規表現と一致することを確認します。

<input type="text" ng-pattern="[a-zA-Z]" />

5. 電子メール

入力コンテンツが電子メールであるかどうかを確認するには、次のように入力タイプを電子メールに設定するだけです。 :

<input type="email" name="email" ng-model="user.email" />

6. 数値

入力内容を確認します数値かどうか、入力タイプを数値に設定します:

<input type="number" name="age" ng-model="user.age" />

7. URL

入力内容がURL、入力タイプを url:

<input type="url" name="homepage" ng-model="user.facebook_url" />

in the form Control variables

フォームのプロパティは、それらが属する $scope オブジェクトでアクセスでき、$scope にアクセスできますオブジェクトなので、JavaScript は DOM 内のフォームプロパティに間接的にアクセスできます。これらのプロパティを利用すると、(AngularJS の他のすべてと同様に) フォームに対してリアルタイムの応答を行うことができます。これらのプロパティには次のものが含まれます。 (これらのプロパティには、以下の形式を使用してアクセスできることに注意してください。)

formName.inputFieldName.property

■未変更フォーム

これは、ユーザーがフォームを変更したかどうかを判断するために使用されるブール型プロパティです。変更されていない場合は値がtrue、変更されている場合は値がfalse

formName.inputFieldName.$pristine

■変更されたフォーム

ユーザーがフォームを変更している限り、入力が検証されているかどうかに関係なく、否か、値は true を返します

formName.inputFieldName.$dirty

■合法的な形式

このブール属性は、フォームの内容が合法であるかどうかを判断するために使用されます。現在のフォームのコンテンツが正当な場合、次の属性の値は true:

formName.inputFieldName.$valid

■ 不正なフォーム

このブール属性は、フォームのコンテンツが不正かどうかを判断するために使用されます。現在のフォームのコンテンツが不正な場合、次の属性の値は true になります:

formName.inputFieldName.$invalid

■ Error

これは、AngularJS によって提供されるもう 1 つの非常に便利な属性です: $error オブジェクト。これには、現在のフォームのすべての検証と、それらが有効かどうかに関する情報が含まれています。このプロパティにアクセスするには、次の構文を使用します。

formName.inputfieldName.$error

$parsers

ユーザーがコントローラーを操作し、ngModelController の $setViewValue() メソッドが呼び出されると、$parsers 配列内の関数がパイプライン処理されます。フォームは 1 つずつ呼び出されます。最初の $parse が呼び出された後、実行結果は 2 番目の $parse に渡され、以下同様です

これらの関数は、入力値を変換したり、$setValidity() 関数を通じてフォームの有効性を設定したりできます。

$parsers 配列の使用は、カスタム検証を実装する方法の 1 つです。

　　例如，假设我们想要确保输入值在某两个数值之间，可以在 $parsers 数组中入栈一个新的函数，这个函数会在验证链中被调用。

　　每个 $parser 返回的值都会被传入下一个 $parser 中。当不希望数据模型发生更新时返回undefined 。

html

<!DOCTYPE html><html ng-app="myApp"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表单测试</title>
    <link rel="stylesheet" href="">
    <script type="text/javascript" src="angular.1.2.13.js"></script></head><body>
    <p ng-controller="TestController">
        <form name="testForm">
            <input type="number" name="inputs" ng-test ng-model="obj.number">
            <span ng-show="testForm.inputs.$error.test">good</span>
            <span ng-hide="testForm.inputs.$error.test">bad</span>
            <p>{{ testForm.inputs.$valid }}</p>
            <p>{{ testForm.inputs.$invalid }}</p>
            <p>{{ obj.number }}</p>
        </form>
    </p>
    <script type="text/javascript" src="test5app.js"></script></body></html>

javascript ( test5app.js )

angular.module(&#39;myApp&#39;, []).controller(&#39;TestController&#39;, function($scope) {
    $scope.obj = {
        number: 34
    }
}).directive(&#39;ngTest&#39;, function() {    
return {
        require: &#39;?ngModel&#39;,
        restrict: &#39;AE&#39;,
        link: function($scope, iElm, iAttrs, ngModel) {            
        if (!ngModel) return;
            ngModel.$parsers.push(function(viewValue) {                
            var num = parseInt(viewValue);                
            if (num >= 0 && num < 99) {
                    ngModel.$setValidity(&#39;test&#39;, true);                    
                    return viewValue
                } else {
                    ngModel.$setValidity(&#39;test&#39;, false);                    
                    return undefined
                }
            })
        }
    }
});

以上がAngularJs フォーム検証メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。