Angular表单验证实例详解
表单验证
我去，我感觉我这个人其实还是一个很傻逼的一个人，老是因为拼错了一个单词或者怎么样就浪费我很长时间，这样真的不行不行，要正确对待这个问题，好了，说正题吧，angular也有表单验证minlength,maxlength,required呀这些个东西，还有也支持h5的那些验证,h5的那些验证，就是type啦，type='email',number,url呀这些，然后现在要用angular来验证，可以定义样式哈，不错，然后怎么验证呢，好的上代码
<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset='UTF-8'>
<title>form1</title>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css">
<script type="text/javascript" src='static/plugins/angular.min.js'></script>
<script type="text/javascript" src='static/plugins/angular-messages.js'></script>
</head>
<body>
<div class="col-md-6">
<form role="form" name="myForm" class="form-horizontal" novalidate>
<label>用户名</label>
<input type="email" placeholder="ng-Messages测试" name="name" ng-model="username.name"
ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error">
<div ng-message="required">必填项</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>
<div ng-message='email'>正确的邮箱格式</div>
</div>
</form>
</div>
</body>
<script type="text/javascript">
angular.module("app", ['ngMessages']);
</script>
</html>
这样就可以了，有几个点要声明一下，
第一就是要引入angular-messages.js，
第二就是message跟messages一定要看清楚啊，
第三myForm.name.$error:这个myForm就是form的name值,name就是要验证的input的name值。
第四就是这个还可以自定义验证哈。
恩第五的话明前还没有，大神们可以看看还有什么要注意的，欢迎指出。
自定义验证来说下怎么搞吧，上代码
<input type="text" placeholder="Desired username" name="username" ng-model="signup.username" ng-minlength=3 ng-maxlength=20 ensure-unique="username" required />
你看这个ensure-unique就是自定义的验证，就是需要独一无二呗，这就是在html上的写法，自定义的js代码就是自己写啦，这里也有一个这个对应的代码，是用指令写的，恩上代码
angular.module('myApp', [])
.directive('ensureUnique', ['$http', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
$http({
method: 'POST',
url: '/api/check/' + attrs.ensureUnique,
data: {'field': attrs.ensureUnique}
}).success(function(data, status, headers, cfg) {
c.$setValidity('unique', data.isUnique);
}).error(function(data, status, headers, cfg) {
c.$setValidity('unique', false);
});
});
}
};
}]);
看到没，html，js两步完成自定义验证，就是自定义验证我感觉有点我有点low啊，搞不太来。反正我贴这两段代码就是告诉你们自定义验证的写法是咋样的，哈哈
恩，还有就是anglar的表单验证属性哈，反正上表格吧，一目了然哈，这个都是菜鸟网上有的，你们可以去搜索搜索哈
然后呢，这个怎么用呢，好的，上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<h2>验证实例</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>这个的用法总结几点，
1.只要用一个angular.js不需要引入别的js,但是缺点是什么你懂的啦，不能验证更多的条件啦，嘿嘿 ，这个看自己需求啦。
2.就是她是用ng-show来显示的，这里的myForm.user.$error.required这些个是怎么来的，还是跟上面一样的哈，都是name值，这个就是这样啦，你看required必填嘛，就对应这个$dirty啦so....myForm.user.$dirty ，哈哈 反正这些个代表的意思都在表格里啦。感觉这种的验证条件有效，还是那句话，看自己需求吧。
3.这种用法还有一个问题啊，就是比如说你要先验证一个required，你要是一开始输入框上没内容，他的那个验证提示是不会出现的，所以你要先js给它默认一个值，我感觉这种效果不好啊。所以你看到页面上$scope.user = 'John Doe';js给他先赋值了。
4.还要一个问题，你要先赋值嘛，然后你得搞个控制器啊，又得定义一个控制器，我感觉总结来说我还是觉得第一种方法好点吧。
5.还有一个问题，你每个Input记得绑定ng-model啊，要不然怎么监控。个人看法哈，
还有就是这两种其实也可以结合的，不行可以看代码。好的，上代码吧
<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset='UTF-8'>
<title>form1</title>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css">
<script type="text/javascript" src='static/plugins/angular.min.js'></script>
<script type="text/javascript" src='static/plugins/angular-messages.js'></script>
</head>
<body ng-controller='ctrl'>
<div class="col-md-6">
<form role="form" name="myForm" class="form-horizontal" novalidate>
<label>用户名</label>
<input type="email" placeholder="ng-Messages测试" name="name" ng-model="username.name"
ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error">
<div ng-message="required">必填项</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>
<div ng-message='email'>正确的邮箱格式</div>
</div>
名字 <input type='text' name='name1' ng-model='name1' required>
<span style='color:red' ng-show='myForm.name1.$dirty'>
<span ng-show='myForm.name1.$error.required'>名字是必须的</span>
</span>
</form>
</div>
</body>
<script type="text/javascript">
var app=angular.module("app", ['ngMessages']);
app.controller('ctrl',function($scope){
$scope.name1='wenwen';
})
</script>
</html>就是这样子。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Parlons des métadonnées et des décorateurs dans Angular
Feb 28, 2022 am 11:10 AM
Cet article poursuit l'apprentissage d'Angular, vous amène à comprendre les métadonnées et les décorateurs dans Angular, et comprend brièvement leur utilisation. J'espère qu'il sera utile à tout le monde !
Comment installer Angular sur Ubuntu 24.04
Mar 23, 2024 pm 12:20 PM
Angular.js est une plateforme JavaScript librement accessible pour créer des applications dynamiques. Il vous permet d'exprimer rapidement et clairement divers aspects de votre application en étendant la syntaxe HTML en tant que langage de modèle. Angular.js fournit une gamme d'outils pour vous aider à écrire, mettre à jour et tester votre code. De plus, il offre de nombreuses fonctionnalités telles que le routage et la gestion des formulaires. Ce guide expliquera comment installer Angular sur Ubuntu24. Tout d’abord, vous devez installer Node.js. Node.js est un environnement d'exécution JavaScript basé sur le moteur ChromeV8 qui vous permet d'exécuter du code JavaScript côté serveur. Être à Ub
Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx
May 25, 2022 am 11:01 AM
Cet article vous donnera une compréhension approfondie du gestionnaire d'état NgRx d'Angular et vous présentera comment utiliser NgRx. J'espère qu'il vous sera utile !
Une brève analyse de la façon d'utiliser monaco-editor en angulaire
Oct 17, 2022 pm 08:04 PM
Comment utiliser monaco-editor en angulaire ? L'article suivant enregistre l'utilisation de monaco-editor dans angulaire qui a été utilisé dans une entreprise récente. J'espère qu'il sera utile à tout le monde !
Un article explorant le rendu côté serveur (SSR) dans Angular
Dec 27, 2022 pm 07:24 PM
Connaissez-vous Angular Universel ? Cela peut aider le site Web à fournir un meilleur support SEO !
Angular + NG-ZORRO développent rapidement un système backend
Apr 21, 2022 am 10:45 AM
Cet article partagera avec vous une expérience pratique d'Angular et apprendra comment développer rapidement un système backend en utilisant Angualr combiné avec ng-zorro. J'espère que cela sera utile à tout le monde !
Comment utiliser PHP et Angular pour le développement front-end
May 11, 2023 pm 04:04 PM
Avec le développement rapide d'Internet, la technologie de développement front-end s'améliore et se répète constamment. PHP et Angular sont deux technologies largement utilisées dans le développement front-end. PHP est un langage de script côté serveur capable de gérer des tâches telles que le traitement des formulaires, la génération de pages dynamiques et la gestion des autorisations d'accès. Angular est un framework JavaScript qui peut être utilisé pour développer des applications monopage et créer des applications Web composées de composants. Cet article explique comment utiliser PHP et Angular pour le développement front-end et comment les combiner.
Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes
Mar 15, 2024 pm 04:51 PM
Le comportement d'affichage par défaut des composants du framework Angular ne concerne pas les éléments au niveau du bloc. Ce choix de conception favorise l'encapsulation des styles de composants et encourage les développeurs à définir consciemment la manière dont chaque composant est affiché. En définissant explicitement l'affichage des propriétés CSS, l'affichage des composants angulaires peut être entièrement contrôlé pour obtenir la mise en page et la réactivité souhaitées.
