Méthodes de validation de formulaire AngularJs

Validation du formulaire Anjularjs

Il est très important de pouvoir donner un retour visuel en temps réel en fonction de ce que l'utilisateur saisit dans le formulaire. Dans le contexte de la communication interhumaine, le retour d'information fourni par la validation du formulaire est aussi important que l'obtention d'une saisie correcte.

La validation du formulaire fournit non seulement des commentaires utiles aux utilisateurs, mais protège également nos applications Web contre les dommages causés par une saisie malveillante ou incorrecte. Nous devons faire de notre mieux pour protéger le backend sur le frontend Web.

AngularJS peut combiner la fonction de validation de formulaire HTML5 avec ses propres instructions de validation, et c'est très pratique. AngularJS fournit de nombreuses instructions de validation de formulaire.

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

Pour utiliser la validation de formulaire, assurez-vous d'abord que le formulaire a un attribut de nom comme dans l'exemple ci-dessus.

Tous les champs de saisie peuvent être soumis à une validation de base, comme la longueur maximale et minimale, etc. Ces fonctionnalités sont fournies par les nouveaux attributs de formulaire HTML5.

Si vous souhaitez bloquer le comportement de validation par défaut du navigateur pour le formulaire, vous pouvez ajouter la balise novalidate à l'élément du formulaire

1. Obligatoire

Pour vérifier qu'une saisie de formulaire a été remplie, ajoutez simplement la balise HTML5 requise sur l'élément du champ de saisie :

Remarque : l'attribut obligatoire s'applique à l'élément < input> types : texte, recherche, URL, téléphone, e-mail, mot de passe, sélecteurs de date, numéro, case à cocher, radio et fichier

<input type="text" required />

2. Longueur minimale ng-minleng="{number}"

Pour vérifier si la longueur du texte saisie dans le formulaire est supérieure à une certaine valeur minimale, utilisez la directive AngularJS ng-minleng="{ number}" <🎜 sur le champ de saisie >

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

　3. Longueur maximale ng-maxlength="{number}"

Vérifiez si la longueur du texte de la saisie du formulaire est inférieure ou égale à une certaine valeur maximale, utilisez la directive AngularJS ng-maxlength="{number}" sur le champ de saisie

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

　4. Correspondance de modèle ng-pattern ="/PATTERN/"

Utilisez ng-pattern="/PATTERN/" pour vous assurer que l'entrée correspond à l'expression régulière spécifiée :

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

　5. E-mail

Pour vérifier si le contenu d'entrée est un e-mail, définissez simplement le type d'entrée sur envoyez un e-mail comme suit :

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

　6. Nombres

Vérifiez si le contenu d'entrée est un nombre, définissez le type d'entrée au numéro :

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

7. URL

Vérifiez si le contenu d'entrée est une URL, définissez le type d'entrée sur url :

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

Variables de contrôle dans le formulaire

Les propriétés du formulaire sont accessibles dans l'objet $scope auquel ils appartiennent, et nous pouvons accéder à l'objet $scope, afin que JavaScript puisse accéder indirectement aux propriétés du formulaire dans le DOM. Avec l'aide de ces propriétés, nous pouvons apporter des réponses en temps réel (comme tout le reste dans AngularJS) au formulaire. Ces propriétés sont les suivantes. (Notez que ces propriétés sont accessibles en utilisant le format ci-dessous.)

formName.inputFieldName.property

■Formulaire non modifié

Il s'agit d'une propriété booléenne, utilisée pour déterminer si l'utilisateur a modifié le formulaire. Si elle n'a pas été modifiée, la valeur est vraie, si elle a été modifiée, la valeur est fausse

formName.inputFieldName.$pristine

■ Forme modifiée

Comme tant que l'utilisateur a modifié le formulaire, peu importe si la saisie est vérifiée, la valeur retournera vrai

formName.inputFieldName.$dirty

■Forme juridique

Ce L'attribut booléen est utilisé pour déterminer si le contenu du formulaire est légitime. Si le contenu actuel du formulaire est légal, la valeur de l'attribut suivant est vraie :

formName.inputFieldName.$valid

■ Forme illégale

Cet attribut booléen est utilisé pour déterminer si le contenu du formulaire est illégal. Si le contenu actuel du formulaire est illégal, la valeur de l'attribut suivant est vraie :

formName.inputFieldName.$invalid

Erreur

Il s'agit d'une autre fonctionnalité très utile fournie par AngularJS Propriétés utiles : objet $error. Il contient toutes les validations du formulaire actuel, ainsi que des informations indiquant si elles sont valides ou non. Utilisez la syntaxe suivante pour accéder à cette propriété :

formName.inputfieldName.$error

$parsers

Lorsque l'utilisateur interagit avec le contrôleur, et ngModelController Lorsque la méthode $setViewValue() est appelée, les fonctions du tableau $parsers seront appelées une par une sous la forme d'un pipeline. Une fois le premier $parse appelé, le résultat de l'exécution sera transmis au deuxième $parse, et ainsi de suite

Ces fonctions peuvent convertir la valeur d'entrée ou définir la légalité du formulaire via $setValidity() fonction .

L'utilisation du tableau $parsers est l'un des moyens d'implémenter une validation personnalisée.

　　例如，假设我们想要确保输入值在某两个数值之间，可以在 $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('myApp', []).controller('TestController', function($scope) {
    $scope.obj = {
        number: 34
    }
}).directive('ngTest', function() {    
return {
        require: '?ngModel',
        restrict: 'AE',
        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
                }
            })
        }
    }
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!