表單驗證
我去，我感覺我這個人其實還是一個很傻逼的一個人，老是因為拼錯了一個單詞或者怎么樣就浪費我很長時間，這樣真的不行不行，要正確對待這個問題，好了，說正題吧，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>就是這樣子。
以上所述是小編給大家介紹的Angular表單驗證實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
