angular学习的一些小笔记(中)之表单验证
表單驗(yàn)證
我去，我感覺(jué)我這個(gè)人其實(shí)還是一個(gè)很傻逼的一個(gè)人，老是因?yàn)槠村e(cuò)了一個(gè)單詞或者怎么樣就浪費(fèi)我很長(zhǎng)時(shí)間，這樣真的不行不行，要正確對(duì)待這個(gè)問(wèn)題，好了，說(shuō)正題吧，angular也有表單驗(yàn)證minlength,maxlength,required呀這些個(gè)東西，還有也支持h5的那些驗(yàn)證,h5的那些驗(yàn)證，就是type啦，type='email',number,url呀這些，然后現(xiàn)在要用angular來(lái)驗(yàn)證，可以定義樣式哈，不錯(cuò)，然后怎么驗(yàn)證呢，好的上代碼
<!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測(cè)試" name="name" ng-model="username.name"ng-minlength=3 ng-maxlength=20 required /><div ng-messages="myForm.name.$error"><div ng-message="required">必填項(xiàng)</div><div ng-message="minlength">字符太短小于3</div><div ng-message="maxlength">字符太長(zhǎng)大于20</div><div ng-message='email'>正確的郵箱格式</div></div> </form></div> </body> <script type="text/javascript">angular.module("app", ['ngMessages']); </script> </html>這樣就可以了，有幾個(gè)點(diǎn)要聲明一下，
第一就是要引入angular-messages.js，
第二就是message跟messages一定要看清楚啊，
第三myForm.name.$error:這個(gè)myForm就是form的name值,name就是要驗(yàn)證的input的name值。
第四就是這個(gè)還可以自定義驗(yàn)證哈。
恩第五的話明前還沒(méi)有，大神們可以看看還有什么要注意的，歡迎指出。
?
自定義驗(yàn)證來(lái)說(shuō)下怎么搞吧，上代碼
<input type="text" placeholder="Desired username" name="username" ng-model="signup.username" ng-minlength=3 ng-maxlength=20 ensure-unique="username" required />你看這個(gè)ensure-unique就是自定義的驗(yàn)證，就是需要獨(dú)一無(wú)二唄，這就是在html上的寫法，自定義的js代碼就是自己寫啦，這里也有一個(gè)這個(gè)對(duì)應(yīng)的代碼，是用指令寫的，恩上代碼
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);});});}}; }]);看到?jīng)]，html，js兩步完成自定義驗(yàn)證，就是自定義驗(yàn)證我感覺(jué)有點(diǎn)我有點(diǎn)low啊，搞不太來(lái)。反正我貼這兩段代碼就是告訴你們自定義驗(yàn)證的寫法是咋樣的，哈哈
?
?
?
恩，還有就是anglar的表單驗(yàn)證屬性哈，反正上表格吧，一目了然哈，這個(gè)都是菜鳥網(wǎng)上有的，你們可以去搜索搜索哈
| 屬性 | 描述 |
| $dirty | 表單有填寫記錄（這個(gè)我的理解就是required的啦，這個(gè)就是驗(yàn)證輸入框有沒(méi)有東西唄） |
| $valid | 字段內(nèi)容合法的(這個(gè)就是要是你輸入的東西符合你的要求了，就會(huì)出現(xiàn)的你給的提示哈，提示怎么出來(lái)呢，哈哈 對(duì)的，這些提示的出現(xiàn)都是用ng-show哈) |
| $invalid | 這個(gè)很明顯就是內(nèi)容不合法咯 |
| $pristine | 這個(gè)就是表單沒(méi)有填寫記錄咯 |
然后呢，這個(gè)怎么用呢，好的，上代碼
<!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>驗(yàn)證實(shí)例</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>?這個(gè)的用法總結(jié)幾點(diǎn)，
1.只要用一個(gè)angular.js不需要引入別的js,但是缺點(diǎn)是什么你懂的啦，不能驗(yàn)證更多的條件啦，嘿嘿 ，這個(gè)看自己需求啦。
2.就是她是用ng-show來(lái)顯示的，這里的myForm.user.$error.required這些個(gè)是怎么來(lái)的，還是跟上面一樣的哈，都是name值，這個(gè)就是這樣啦，你看required必填嘛，就對(duì)應(yīng)這個(gè)$dirty啦so....myForm.user.$dirty ，哈哈 反正這些個(gè)代表的意思都在表格里啦。感覺(jué)這種的驗(yàn)證條件有效，還是那句話，看自己需求吧。
3.這種用法還有一個(gè)問(wèn)題啊，就是比如說(shuō)你要先驗(yàn)證一個(gè)required，你要是一開(kāi)始輸入框上沒(méi)內(nèi)容，他的那個(gè)驗(yàn)證提示是不會(huì)出現(xiàn)的，所以你要先js給它默認(rèn)一個(gè)值，我感覺(jué)這種效果不好啊。所以你看到頁(yè)面上$scope.user = 'John Doe';js給他先賦值了。
4.還要一個(gè)問(wèn)題，你要先賦值嘛，然后你得搞個(gè)控制器啊，又得定義一個(gè)控制器，我感覺(jué)總結(jié)來(lái)說(shuō)我還是覺(jué)得第一種方法好點(diǎn)吧。
5.還有一個(gè)問(wèn)題，你每個(gè)Input記得綁定ng-model啊，要不然怎么監(jiān)控。個(gè)人看法哈，
還有就是這兩種其實(shí)也可以結(jié)合的，不行可以看代碼。好的，上代碼吧
<!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測(cè)試" name="name" ng-model="username.name"ng-minlength=3 ng-maxlength=20 required /><div ng-messages="myForm.name.$error"><div ng-message="required">必填項(xiàng)</div><div ng-message="minlength">字符太短小于3</div><div ng-message="maxlength">字符太長(zhǎng)大于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>?就是這樣子。
?
然后下午再看的時(shí)候就發(fā)現(xiàn)還有formName.submitted這個(gè)屬性，可以用來(lái)判斷你有沒(méi)有點(diǎn)擊提交，上面都是邊寫然后提示就出來(lái)了，按照這一點(diǎn)你可以提交的時(shí)候然后統(tǒng)一提示。上鏈接http://jsbin.com/ePomUnI/6/edit?html,js,output
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的angular学习的一些小笔记(中)之表单验证的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： angular学习的一些小笔记(中)之n
- 下一篇： json 对象 数组