Validation du formulaire/champ Angularjs à L'aide de la fonction JavaScript sans directives

jetez un coup d'oeil à la documentation du formulaire angularjs - http://docs.angularjs.org/guide/forms . En général, il est basé sur les attributs HTML5 comme nécessaire, min, max, etc.

pour obtenir, par exemple, votre première exigence remplie - "un champ vide devrait montrer" le champ doit contenir un message de valeur", vous devriez faire quelque chose comme ça:

<input type="text" ng-model="user.name" name="uName" required /><br />
<div ng-show="form.uName.$invalid">
  <span ng-show="form.uName.$error.required">Field must contain a value.</span>
</div>

Pour les chiffres de champ, vous pouvez utiliser le pattern l'attribut avec une expression régulière correspondante (exemple: http://www.wufoo.com/html5/attributes/10-pattern.html).

Pour le même nombre de validation, je ne suis pas sûr - je pense que vous devriez aller avec une validation personnalisée pour cela (ce qui signifie que vous auriez à créer une directive) ou utiliser le pattern l'attribut d'une certaine manière.

Dernier point mais non des moindres - n'oubliez pas d'ajouter novalidate<form> balise. Sinon, le navigateur va essayer de valider vos domaines et vous ne voulez pas que:

<form ... novalidate>
 ...
</form>

je sais que la question Est ancienne et je sais que vous ne vouliez pas de directive mais vous pouvez envisager d'utiliser une directive si elle est "angulaire"... Eh bien voici mon Validation Angulaire. J'ai fait un projet sur Github et je pense qu'il est juste comparable à ce qui est/était disponible...Je me suis basé sur L'excellent cadre Laravel PHP et l'ai rendu disponible sous Angular... Il est tellement fou simple, vous avez besoin d' 2 lignes 1 ligne de code, 1 ligne pour l'entrée, 1 ligne pour affichage du message d'erreur, c'est tout... plus jamais et jamais moins!!! Assez dit, nous allons donner quelques exemples:

<!-- example 1 -->
<label for="input1">Email</label>
<input type="text" validation="email|min_len:3|max_len:25|required" ng-model="form1.input1" name="input1" />

<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />

donc je peux définir n'importe quelle quantité de règles de validation (déjà 25+ types de validateurs) que je veux dans une simple directive validation="min_len:2|max_len:10|required|integer" et le message d'erreur s'affiche toujours dans la prochaine <span> vous ne l'aimez pas déjà? 1 ligne de code pour votre entrée, 1 ligne de code pour l'affichage des erreurs, vous ne pouvez pas être plus simple...oh, et j'ai même un soutien personnalisé de votre Regex si vous souhaitez ajouter. Un autre bonus, je supporte aussi l'événement déclencheur que vous voulez, les plus communs sont probablement onblur et onkeyup. Oh Et je supporte aussi plusieurs langages de localisation via des fichiers externes JSON. J'ai vraiment ajouté toutes les fonctionnalités imaginables que je voulais dans 1 directive très simple.



plus de forme groupée avec 10 lignes de code pour 1 entrée (désolé mais toujours trouvé un peu extrême) quand la seule chose dont vous avez besoin est 2 lignes, pas plus, même pour un entrée avec 5 validateurs. Et pas de soucis à propos de la forme de ne pas devenir invalide, j'ai pris soin de cela aussi bien, tout est géré de la bonne manière "angulaire".



jetez un oeil à mon projet Github Validation Angulaire... Je suis sûr que tu aimeras ça =)



UPDATE

Un autre bonbon bonus! Pour rendre l'expérience utilisateur encore plus agréable, j'ai ajouté la validation sur timer. Le concept est simple, ne pas dérangez l'utilisateur pendant qu'il tape, mais validez s'il fait une pause ou un changement d'entrée (onBlur)... C'est l'amour!!!

Vous pouvez même personnaliser la minuterie selon votre goût, j'ai décidé de défaut à 1 seconde dans la directive, mais si vous voulez le personnaliser, vous pouvez l'appeler comme par exemple typing-limit="5000" pour faire un 5 sec. délai d'attente. Exemple complet:

<input type="text" ng-model="form1.input1" typing-limit="5000" validation="integer|required" name="input1" />
<span class="validation text-danger"></span>

UPDATE #2

Ajout de la validation de confirmation de correspondance d'entrée(ex.: confirmation du mot de passe), voici un exemple de code

<!-- input match confirmation, as for example: password confirmation -->
<label for="input4">Password</label>
<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required"  />
<label for="input4c">Password Confirmation</label>
<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password|required"  />

mise à jour #3

Refonte de la directive, de sorte que l'exigence d'avoir un <span> afficher l'erreur n'est pas nécessaire, la directive la gère maintenant elle-même, voir le changement de code réfléchi en haut.



DEMO

Ajout d'une démonstration en direct sur Plunker

Vous pouvez essayer de créer un func

<span ng-show='isEven(theText)'>Value must be an even number</span>

$scope.isEven=function(data) {
    if(data) {
        return data%2===0
    }
    return true;
}

la méthode peut être définie soit sur le Controller scope courant ou sur $rootScope.

pas très anguleux, car les directives seraient mieux, mais je pense que ça marcherait.