表单验证
我去，我感觉我这个人其实还是一个很傻逼的一个人，老是因为拼错了一个单词或者怎么样就浪费我很长时间，这样真的不行不行，要正确对待这个问题，好了，说正题吧，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> <form role="form" name="myForm" 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 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 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> <form role="form" name="myForm" 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 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>
就是这样子。
以上所述是小编给大家介绍的Angular表单验证实例详解，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！