Instructions de vérification des formulaires communs
1. Vérification requise
Si une entrée de formulaire a été remplie, ajoutez simplement la balise HTML5 requise à l'élément de champ de saisie:
Copiez le code comme suit: <entrée type = "texte" requis />
2. Longueur minimale
Vérifiez que la longueur de texte de l'entrée de formulaire est supérieure à une certaine valeur minimale et utilisez l'instruction ng-minleng = "{nombre}" sur le champ de saisie:
Copiez le code comme suit: <input type = "text" ng-miNLength = "5" />
3. Longueur maximale
Vérifiez que la longueur de texte de l'entrée de formulaire est inférieure ou égale à une certaine valeur maximale et utilisez l'instruction ng-maxLength = "{nombre}" sur le champ de saisie:
Copiez le code comme suit: <input type = "text" ng-maxLength = "20" />
4. correspondance de motifs
Utilisez ng-sattern = "/ patron /" pour vous assurer que l'entrée correspond à l'expression régulière spécifiée:
Copiez le code du code comme suit: <input type = "text" ng-mod-sattern = "/ [a-za-z] /" />
5. Courriel
Vérifiez que le contenu d'entrée est un e-mail, définissez simplement le type d'entrée sur e-mail comme ci-dessous:
Copiez le code comme suit: <entrée type = "e-mail" name = "e-mail" ng-model = "user.email" />
6. Nombres
Vérifiez que le contenu d'entrée est un nombre et définissez le type d'entrée sur le numéro:
Copiez le code comme suit: <input type = "nombre" name = "age" ng-model = "user.age" />
7. URL
Vérifiez que le contenu d'entrée est une URL et définissez le type d'entrée sur URL:
Copiez le code comme suit: <input type = "url" name = "homepage" ng-model = "user.facebook_url" />
Testons ces vérifications de formulaire dans des implémentations spécifiques:
<div> <form role = "form"> <div> <div> <étiquette pour = "name"> 1.reQuired </ labe> </div> <div> <input id = "name" type = "text" requis ng-model = 'user.name' /> </div> </div> <v> <div> <label for = "minlength"> 2. Longueur minimum = 5 </ label> </ div> <v> <input type = "text" id = "minLength" ng-minilength = "5" ng-model = "user.minlength" /> </ div> </ div> <div> <label for = "minLength"> 3.maximum length = 20 </vold> </ div> <v> <puty type = "Text" ng-model = "user. ng-maxLength = "20" /> </div> </div> <div> <div> <label for = "minLength"> 4. Match Matching </ Label> </div> <div> <input type = "text" id = "minLength" ng-model = "user.pattern" ng-potern = "/ ^ [a-za-z] * / d $ /" /> </div> </div> <div> <v> <label for = "e-mail"> 5. Email </ label> </div> </div> <div> <étiquette pour = "Email"> 5. Email </ label> </ div> <div> <entrée type = "e-mail" id = "e-mail" name = "e-mail" ng-model = "user.email" /> </div> </div> <v> <div> <label for = "age"> 6. Number</label> </div> <div> <input type="number" id="age" name="age" ng-model="user.age" /> </div> </div> <div> <div> <label for="url"> 7. URL</label> </div> <div> <input type="url" id="url" name="homepage" ng-model="user.url" /> </ div> </ div> <div> <input type = "soume" value = "soumed" /> </ div> </form> </div> <div> 1. Fields requis: {{user.name}} <br> 2. Min. longueur = 5: {{user.minLength}} <br> 3. Longueur maximum = 20: {{user.maxLength}} <br> 4. Match Matching: {{user.pattern}} <br> 5. Email: {{user.email}} <br> 6. 7.url: {{user.url}} <br> </ div>Dans le test, nous avons constaté que la liaison bidirectionnelle ne sera effectuée en temps réel que lorsque l'expression satisfait la vérification. En même temps, nous avons également constaté que les rendus sont les suivants:
Rien ne semble s'être produit, mais si nous le portons vers un navigateur avec une équipe de vérification HTML5 qui n'est pas très bonne, le testons [IE9 dans cet exemple], le problème est que certains champs ne sont pas du tout vérifiés.
En fait, dans l'exemple ci-dessus, nous avons utilisé la vérification HTML5 et la propre vérification de NG pour la combiner. Il ne prend pas en charge la vérification HTML5, mais la vérification gratuite de NG fonctionne bien. La solution est très simple. Vous pouvez utiliser la correspondance des modèles pour résoudre ces situations, ou vous pouvez personnaliser les instructions de vérification pour réécrire ou redéfinir les règles de vérification.
Bloquer le comportement de vérification par défaut du navigateur pour les formulaires
Ajoutez simplement la balise Novalidate sur l'élément de formulaire. La question est de savoir comment savoir quels domaines de notre forme sont valides et quelles choses sont illégales ou invalides? Ng offre également une excellente solution à cela. Les propriétés du formulaire sont accessibles dans l'objet $ SCOPE à laquelle il appartient, et nous pouvons accéder à l'objet $ Scope, afin que JavaScript puisse indirectement accéder aux propriétés du formulaire dans le DOM. Avec ces propriétés, nous pouvons répondre en temps réel à la forme.
Ces propriétés sont accessibles à l'aide du format formname.inputFieldName.Property.
Forme non modifiée
Propriété booléenne indiquant si l'utilisateur a modifié le formulaire. S'il s'agit, cela signifie qu'il n'a pas été modifié; Faux signifie qu'il a été modifié:
La copie de code est la suivante: formName.inputFieldName. $ Pristine; forme modifiée
Propriété booléenne si et seulement si l'utilisateur a réellement modifié le formulaire. Que le formulaire soit vérifié ou non:
La copie de code est la suivante: FormName.inputFieldName. $ Sale
Forme vérifiée
Propriété booléenne qui indique si le formulaire a passé la vérification. Si le formulaire est actuellement validé, ce sera vrai:
Le code de copie est le suivant: formName.inputFieldName. $ Valide le code de copie est le suivant: formName.inputFieldName. $ Invalid
Les deux dernières propriétés sont particulièrement utiles lorsqu'ils sont utilisés pour afficher ou cacher l'élément DOM. En même temps, ils sont également très utiles si vous souhaitez configurer une classe spécifique.
erreur
Il s'agit d'une autre propriété très utile fournie par AngularJS: l'objet $ Erreur. Il contient tout le contenu de vérification du formulaire actuel, ainsi que des informations sur leur légitime. Accéder à cette propriété en utilisant la syntaxe suivante
La copie de code est la suivante: formName.inputFieldName. $ Erreur
Si la vérification échoue, la valeur de cette propriété est vraie; Si la valeur est fausse, cela signifie que la valeur du champ d'entrée a passé la vérification.
Ci-dessous, nous testons ces instructions de vérification:
<! Doctype html> <html ng-app = "mytest"> <éadf> <meta name = "Viewport" contenu = "width = device-width" /> <tight> index </ title> <link href = "~ / contenu / csss / script. src = "~ / javascript / angular.min.js"> </ script> <style type = "text / css"> body {padding-top: 30px; } </ style> </ head> <body ng-controller = "myController"> <div> <form role = "form" name = "myform" ng-submit = "soumeForm (myform. $ valid)" novalidate> <div> <div> <label for = "name"> 1.reQUired </ label> </v> <div> <entrée id = "name" name = "Type =" Table ng-model = 'user.name' /> <span ng-show = "myform.name. $ sale && myform.name. $ valid"> </span> </div> </div> <div> <div> <label for = "minLength"> 2. Longueur minimale = 5 </ label> </ div> <v> <input type = "text" id = "minLength" name = "minLength" ng-minLength = "5" ng-model = "user.minlength" /> <span ng-show = "myform.minlength. $ Dirty && myform.minLength. pour = "MaxLength"> 3.maximum Longueur = 20 </ Label> </ Div> <div> <Input Type = "Text" id = "MaxLength" Name = "MaxLength" Ng-Model = "User.maxLength" NG-MaxLength = "20" /> <spann ng-show = "Myform.maxLength. </div> <div> <div> <étiquette pour = "Pattern"> 4. Match Matching </ Label> </ Div> <div> <Input Type = "Text" id = "Pattern" name = "Pattern" ng-model = "User.Pattern" ng-Pattern = "/ ^ [A-ZA-Z] * / D $ /" /> <span ng-show = "MyForm.Pattern. $ Dirty && myform.pattern. <étiquette pour = "e-mail"> 5. Email </ label> </ div> <v> <entrée type = "e-mail" id = "e-mail" name = "e-mail" ng-model = "user.email" /> <span ng-show = "myform.email. $ Sale && myform.email. $ Valid"> </span> </ div> </div> <div> <div> <label for = "Âge"> 6. Numéro </ Label> </ Div> <div> <Input Type = "Number" id = "Age" name = "Age" ng-Model = "user.age" /> <span ng-show = "Myform.age. $ Dirty && myform.age. $ Valid"> </ span> </ div> </ div> <div> <label pour = "url"> 7. id = "url" name = "url" ng-model = "user.url" /> <span ng-show = "myform.url. $ sale && myform.url. $ valid"> </span> </div> </ div> <v> <entrée ng-diseable {{user.name}} $ Durstine [non modifié]: {{myform.name. $? Obligatoire: {{myform.name. $ error.requure}} <br> 2. Longueur minimale = 5: {{user.minlength}} $ corberstin [non modifié]: {{Myform.minlength. $ Pristine}} $ Dirty 【Modified】: {{myform. {{myform.minlength. $ invalid}} $ invalid 【vérification réussie】: {{myform.minlength. $ valide}} $ Erreur 【Détails d'erreur】: {{myform.minlength. $ Error}} <br> 3. MAXIMUM LONGUE {{Myform.maxLength. $ Durstine}} $ sale 【Modified】: {{myform.maxLength. $ Dirty}} $ invalid 【Vérification a échoué】: {{myform.maxLength. $ invalid}} $ invalid 【Verification a réussi】: {{{myform.maxLength. Détails】: {{Myform.maxLength. $ Error}} <br> 4. Patchage Matching: {{user.Pattern}} $ Pristine 【non modifié】: {{MyForm.Pattern. {{myform.Pattern. $ invalid}} $ invalid 【vérification réussie】: {{myform.pattern. $ invalid}} $ error 【Détails d'erreur】: {{myform.pattern. $ error}} <br> 5. Email: {{user.email}} $ Pristine 【non modifié】: {{Myform.email. $ Distine}} $ sale 【modifié】: {{myform.email. $ sale}} $ invalid 【Vérification a échoué】: {{myform.email. $ invalid}} $ invalid 【Verification a réussi】: {{myform. {{myform.email. $ error}} <br> 6. Numéro: {{user.age}} $ corbarfy $ invalide 【Vérification réussie】: {{{myform.age. $ valide}} $ Erreur 【Détails d'erreur】: {{myform.age. $ Error}} <br> 7.url: {{user.url}} $ Pristine 【non modifié】: {{myform.url. $ prim {{myform.url. $ sale}} $ invalid 【Vérification a échoué】: {{myform.url. $ invalid}} $ invalid 【vérification réussie】: {{myform.url. $ valid}} $ error 【【error Detail </ body> </html> <script type = "text / javascript"> angular.module ('mytest', []) .Controller ('myController', function ($ scope) {$ scope.submitform = function (isvalid) {if (! isValid) {alert ('Verification failli');};};Les effets sont les suivants:
Dans le même temps, NG a défini certains styles CSS pour ces instructions de vérification de manière ciblée.
Ils incluent:
La copie de code est la suivante: .ng-valid {} .ng-invalid {} .ng-extine {} .ng-diirty {} / * CSS vraiment spécifique appliqué par Angular * /.
Ils correspondent à l'état spécifique du champ de saisie de formulaire.
Par exemple, lorsque l'entrée dans un champ est illégale, la classe .ng-invlid sera ajoutée à ce champ. Vous pouvez modifier votre CSS préféré. Vous pouvez personnaliser ces classes en privé pour implémenter des applications de scénarios spécifiques.
Cependant, les instructions de vérification par défaut peuvent ne pas être en mesure de répondre pleinement à nos scénarios d'application réels, et les fonctions d'instructions de vérification personnalisées sont également fournies par NG.
Tout d'abord, jetons un coup d'œil à un exemple simple:
angular.module ("mytest", []) .directive ('multiplemail', [function () {return {require: "ngModel", link: function (scope, élément, att, ngModel) {if (ngModel) {var e-mailsregexp = /^(@a-z0-9!#$%&'*+//=?^_` '' '. ngmodel. $ setValidité ("multiplemail", validité);Le code de la page HTML est le suivant:
<form role = "form" id = "custom_form" name = "custom_form" romanate> <div> <vabed> multiple e-mail </ label> <v> <entrée multiple-email name = "user_email" ng-model = "user.email" requis de placeholder = "Custom Verification, plusieurs adresses e-mail, se séparez"; "ou" </div> </div> <v> <entrée ng-disabled = "custom_form. $ invalid" type = "soumi" value = "soumi" /> </div> </ form>
Le code est très simple et l'effet est le suivant:
Ce code est très simple, mais implique plusieurs propriétés importantes de NGModelController. $ ViewValue
La propriété $ ViewValue contient la chaîne réelle requise pour mettre à jour la vue.
$ ModelValue
$ ModelValue est détenu par le modèle de données. $ ModelValue et $ ViewValue peuvent être différents selon que le pipeline Parser $ fonctionne dessus.
$ analyseurs
La valeur des analyseurs $ est un tableau composé de fonctions. Lorsque l'utilisateur interagit avec le contrôleur et que la méthode $ setViewValue () dans le NGModelController est appelée, les fonctions dans le NGModelController sont appelées une par une lorsque l'utilisateur interagit avec le contrôleur, et la méthode $ SetViewValue () dans le NGMODELContller est appelée une par un sous la forme d'une pipeline. La valeur lue par NGModel à partir du DOM est transmise dans la fonction dans $ Parsers et est traitée par l'analyseur en séquence. Ceci est pour le traitement et la modification des valeurs.
Remarque: la fonction ngmodel. $ SetViewValue () est utilisée pour définir la valeur de vue dans la portée.
La fonction ngmodel. $ SetViewValue () peut accepter un paramètre.
Valeur (String): Le paramètre de valeur est la valeur réelle que nous souhaitons attribuer à l'instance NGModel.
Cette méthode met à jour le $ ViewValue local sur le contrôleur et transmet la valeur à chaque fonction $ analyser (y compris le validateur). Lorsque la valeur est analysée et que toutes les fonctions du pipeline $ Parser sont appelées, la valeur sera attribuée à la propriété $ ModelValue et transmise à l'expression fournie par la propriété Ng-Model dans l'instruction. Enfin, une fois toutes les étapes terminées, tous les auditeurs de $ ViewChangeListenners seront appelés. Notez que l'appel $ setViewValue () seul n'évoquera pas une nouvelle boucle de digest, donc si vous souhaitez mettre à jour la directive, vous devez déclencher manuellement le digest après la définition de $ ViewValue. La méthode $ setViewValue () convient à l'écoute des événements personnalisés dans des directives personnalisées (telles que l'utilisation d'un plugin jQuery avec des fonctions de rappel), nous tenons à définir $ ViewValue et à exécuter des boucles de digestion lorsque le rappel est appelé.
$ formateurs
La valeur des formateurs $ est un tableau de fonctions qui sont appelées une par une sous la forme d'un pipeline lorsque la valeur du modèle de données change. Il n'a aucun effet sur le pipeline $ analyseur et est utilisé pour formater et convertir les valeurs pour afficher dans les contrôles avec cette valeur liée.
$ ViewChangeListeners
La valeur de $ ViewChangeListenners est un tableau de fonctions qui sont appelées une par une sous la forme d'un pipeline lorsque la valeur de la vue change. Avec $ ViewChangeListenners, un comportement similaire peut être réalisé sans utiliser $ watch. Étant donné que la valeur de retour est ignorée, ces fonctions n'ont pas besoin de valeurs de retour.
$ Erreur
L'objet $ Erreur contient le nom du validateur qui n'a pas réussi la vérification et les informations d'erreur correspondantes.
$ vierge
La valeur de $ vierge est booléenne, qui peut nous dire si l'utilisateur a modifié le contrôle.
$ sale
La valeur de $ sale est l'opposé de $ vierge, qui peut nous dire si l'utilisateur a interagi avec le contrôle.
$ valide
La valeur valide $ nous indique s'il y a des erreurs dans le contrôle actuel. La valeur est fausse lorsqu'il y a une erreur, et la valeur est vraie lorsqu'il n'y a pas d'erreur.
$ invalide
La valeur $ non valide nous indique s'il y a au moins une erreur dans le contrôle actuel, et sa valeur est l'opposé de $ valide.
Après avoir appris les points de connaissance de base, vous devez apprendre profondément la méthode d'écriture de vérification personnalisée. Après NG1.3, la facilité d'utilisation des instructions de vérification a été améliorée.
Ce qui précède est une explication détaillée des exemples d'utilisation du formulaire de vérification AngularJS qui vous est présenté par l'éditeur. J'espère que cela peut vous aider. Je continuerai à mettre à jour la connaissance pertinente du formulaire de vérification AngularJS à l'avenir. Veuillez faire attention au site Web de Wulin.com!