目錄
基本驗(yàn)證
驗(yàn)證插件messages
自定義驗(yàn)證
基本驗(yàn)證
<form name="form" novalidate ng-app> <span>{{form.$invalid}}</span> <span>{{form.$valid}}</span> <span>{{form.$dirty}}</span> <span>{{form.$pristine}}</span> <input type="text" ng-model="user" required /> <input type="text" ng-model="pwd" required minlength="4" ng-maxlength="5" /> <input type="text" ng-model="phone" required ng-pattern="/1[3|5|7|8|][0-9]{9}/" /> <input type="email" ng-model="email" required /> <input type="url" ng-model="url" required /> <input type="number" ng-model="number" required /> <div> <button type="reset" ng-disabled="form.$pristine">重置</button> <button type="submit" ng-disabled="form.$invalid">提交</button> </div></form>以上展示了基本的ng驗(yàn)證.
這里重點(diǎn)介紹一下上面的特例:
novalidate:禁用H5自帶的驗(yàn)證
ng-maxlength: 如果不寫ng,maxlength則直接限制最多輸入字符,稍微有點(diǎn)區(qū)別(IE9 + Chrome 測(cè)試)
ng-pattern:通過正則驗(yàn)證,如果不寫ng開頭,無驗(yàn)證效果.
注:要啟用驗(yàn)證 同時(shí)需要綁定一個(gè)ng-model
訪問表單屬性
---方位表單: <form name>.<angular property>
---訪問一個(gè)輸入框: <form name>.<input name>.<angular property>
驗(yàn)證插件
在介紹messages插件之前,我們看下本來的驗(yàn)證提示
<form name="form" ng-app novalidate> <span>{{form.user.$error.required?'user該項(xiàng)必填':''}}</span> <input type="text" ng-model="user" name="user" required /> <span>{{form.pwd.$error.required?'pwd該項(xiàng)必填':''}}</span> <input type="text" ng-model="pwd" name="pwd" required /> <span>{{form.info.$error.required?'info該項(xiàng)必填':''}}</span> <input type="text" ng-model="info" name="info" required /> <span>{{form.age.$error.required?'age該項(xiàng)必填':''}}</span> <input type="text" ng-model="age" name="age" required /> <div> <button type="submit" ng-disabled="form.$invalid">提交</button> </div></form>
這里只是判斷了require 當(dāng)我們的代碼 我們重復(fù)寫了很多3元表達(dá)式
messages插件就是更友好的解決重復(fù)的問題
<form name="form" ng-app="myApp" novalidate> <input type="email" ng-model="user" name="username" required minlength="4" /> <div ng-messages="form.username.$error" ng-messages-multiple> <div ng-message="required">該項(xiàng)必填</div> <div ng-message="minlength">低于最低長度</div> <div ng-message="email">應(yīng)為email</div> </div></form><script src="Scripts/angular.min.js"></script><script src="Scripts/angular-messages.min.js"></script><script> angular.module('myApp', ['ngMessages']);</script>Nuget:Install-Package AngularJS.Messages
自定義驗(yàn)證
通過基本的驗(yàn)證方式,我們已經(jīng)能夠解決大部分的驗(yàn)證問題.但項(xiàng)目中永遠(yuǎn)充滿著各種各樣的需求.
在ng中的自定義驗(yàn)證,一般通過指令的形式創(chuàng)建.
<form name="form" ng-app="myApp" novalidate> <input type="email" ng-model="user" name="username" required ensure-unique minlength="4" /> <div ng-messages="form.username.$error" ng-messages-multiple> <div ng-message="required">該項(xiàng)必填</div> <div ng-message="minlength">低于最低長度</div> <div ng-message="email">應(yīng)為email</div> <div ng-message="unique">用戶名已存在</div> </div></form>
在上面的messages插件Demo中,新建一行驗(yàn)證用戶名已存在 以及 在input上添加了ensure-unique指令
同時(shí),我們需要在js中定義ensure-unique指令:
angular.module('myApp', ['ngMessages']).directive('ensureUnique', ['$http', '$timeout', '$window', function ($http, $timeout, $window) { return { restrict: "A", require: 'ngModel', link: function (scope, ele, attrs, ngModelController) { scope.$watch(attrs.ngModel, function (n) { if (!n) return; $timeout.cancel($window.timer); $window.timer = $timeout(function () { $http({ method: 'get', url: '/api/checkusername/', //根據(jù)換成自己的url params: { "username": n } }).success(function (data) { ngModelController.$setValidity('unique', data.isUnique); //這個(gè)取決于你返回的，其實(shí)就是返回一個(gè)是否正確的字段，具體的這塊可以自己修改根據(jù)自己的項(xiàng)目 }).error(function (data) { ngModelController.$setValidity('unique', false); }); }, 500); }); } }; }]);指令不是本節(jié)重點(diǎn)內(nèi)容,這里簡(jiǎn)單說下
ngModelController.$setValidity('unique', bool);
通過該API可以設(shè)置$error.unique.
setValidity為true,則$error.unique為false
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
