常用的表單驗(yàn)證指令
必填項(xiàng)驗(yàn)證
判斷輸入表單是否已經(jīng)填寫，只需要在輸入字段上添加HTML5標(biāo)記required即可:
<input type="text" required />
還有一個(gè)ng-required可以控制該項(xiàng)是否是必填的
<input type="text" ng-required="true" />
最小值
驗(yàn)證表單的輸入的數(shù)值是否大于某一個(gè)最小值，在輸入字段上用指令min="{number}":
<input type="number" ng-model="user.score" min="10" />
最大值
驗(yàn)證表單的輸入值是否小于等于某一個(gè)最大值昙沦，在輸入字段上用指令max="{number}":
<input type="number" ng-model="user.score" max="100" />
最小長(zhǎng)度
驗(yàn)證表單輸入的文本長(zhǎng)度是否大于某個(gè)最小值切省，在輸入字段上使用指令ng-minlength="{number}":
<input type="text" ng-minlength="5" />
最大長(zhǎng)度驗(yàn)證
驗(yàn)證表單輸入的文本長(zhǎng)度是否小于或者等于某個(gè)最大值爸黄，在輸入字段上使用指令ng-maxlength="{number}":
<input type="text" ng-maxlength="20" />
模式匹配
使用ng-pattern="/PATTERN/"來確保輸入能夠匹配指定的正則表達(dá)式:
<input type="text" ng-pattern="/[a-zA-Z]/" />
電子郵件
驗(yàn)證輸入內(nèi)容是否是電子郵件搁凸，只要將input的類型設(shè)置為email即可:
<input type="email" name="email" ng-model="user.email" />
數(shù)字
驗(yàn)證輸入內(nèi)容是否是數(shù)字萌朱，將input的類型設(shè)置為number:
<input type="number" name="age" ng-model="user.age" />
URL
驗(yàn)證輸入內(nèi)容是否是URL屠阻，將input的類型設(shè)置為url:
<input type="url" name="homepage" ng-model="user.homepage" />
出錯(cuò)時(shí)angular添加的class
| 表單狀態(tài) | 應(yīng)用的CSS |
|---|---|
| $invalid | ng-invalid |
| $valid | ng-valid |
| $pristine | ng-pristine |
| $dirty | ng-dirty |
| 指令 | 應(yīng)用的CSS |
|---|---|
| required或者ng-required | ng-valid-required或者ng-invalid-required |
| min | ng-valid-min或ng-invalid-min |
| max | ng-valid-max或ng-invalid-max |
| ng-pattern | ng-valid-pattern或ng-invalid-pattern |
| type="url" | ng-valid-url或ng-invalid-url |
| type="email" | ng-valid-email或ng-invalid-email |
| type="date" | ng-valid-date或ng-invalid-date |
| type="number" | ng-valid-number或ng-invalid-number |
禁用HTML5默認(rèn)的表單驗(yàn)證
在form上添加novalidate屬性红省，就可以禁用HTML5自帶的驗(yàn)證
獲取表單中各個(gè)field的狀態(tài)
未修改過的field
布爾值屬性，表示用戶是否修改了該字段国觉。如果為true吧恃，表示沒有修改過；false表示修改過:
formName.inputFieldName.$pristine;
修改過的field
布爾型屬性麻诀，當(dāng)且僅當(dāng)用戶實(shí)際已經(jīng)修改過的字段蚜枢。不管字段是否有效:
formName.inputFieldName.$dirty;
經(jīng)過驗(yàn)證的字段
布爾型屬性，它指字段是否通過驗(yàn)證针饥。如果通過厂抽，它將為true:
formName.inputFieldName.$valid
未通過驗(yàn)證的表單
formName.inputFieldName.$invalid
何時(shí)可以在$scope中取到表單中各個(gè)字段的狀態(tài)
angular的驗(yàn)證是由form指令和ngModel協(xié)調(diào)完成的。當(dāng)驗(yàn)證控件沒有name屬性的時(shí)是不會(huì)被form捕獲的丁眼。下面讓我們從angular的源碼中看起:
首先是ngModel:
var ngModelDirective = function() {
return {
require: ['ngModel', '^?form'],
controller: NgModelController,
link: function(scope, element, attr, ctrls) {
// notify others, especially parent forms
var modelCtrl = ctrls[0],
formCtrl = ctrls[1] || nullFormCtrl;
formCtrl.$addControl(modelCtrl);
scope.$on('$destroy', function() {
formCtrl.$removeControl(modelCtrl);
});
}
};
};
從上面我們可以看出來ngModel指令會(huì)在編譯時(shí)期的post link階段會(huì)通過form的addControl方法把自己的controller注冊(cè)到父節(jié)點(diǎn)的form的formController中筷凤。再看看ngModelController初始化代碼:
var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse',
function($scope, $exceptionHandler, $attr, $element, $parse) {
....
this.$pristine = true;
this.$dirty = false;
this.$valid = true;
this.$invalid = false;
this.$name = $attr.name;
從上面我們可以看到ngModel的$name屬性并不支持表達(dá)式計(jì)算。而FormController的addControl代碼則是:
/**
* @ngdoc function
* @name ng.directive:form.FormController#$addControl
* @methodOf ng.directive:form.FormController
*
* @description
* Register a control with the form.
*
* Input elements using ngModelController do this automatically when they are linked.
*/
form.$addControl = function(control) {
// Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored
// and not added to the scope. Now we throw an error.
assertNotHasOwnProperty(control.$name, 'input');
controls.push(control);
if (control.$name) {
form[control.$name] = control;
}
};
從上面我們可以清楚的看見雖然ngModel注冊(cè)了自己，但是這里也不一定能注冊(cè)成功藐守，ngModel必須有自己的$name才能被注冊(cè)成功挪丢。
