AngularJS自定義表單驗證功能實例詳解
更新時間：2018年08月24日 11:29:19 作者：Jax2000
這篇文章主要介紹了AngularJS自定義表單驗證功能,結(jié)合完整實例形式詳細分析了AngularJS實現(xiàn)表單驗證的相關(guān)指令、模型綁定、數(shù)據(jù)驗證等操作技巧,需要的朋友可以參考下
本文實例講述了AngularJS自定義表單驗證功能。分享給大家供大家參考，具體如下：
Angular實現(xiàn)了大部分常用的HTML5的表單控件的類型(text, number, url, email, date, radio, checkbox)，也實現(xiàn)了很多指令做為驗證(required, pattern, minlength, maxlength, min, max)。
在自定義的指令中，我們可以添加我們的驗證方法到ngModelController的$validators對象上。為了取得這個controller對象，我們需要requirengModel指令。
在$validators對象上的每個方法都接收modelValue和viewValue兩個值做為參數(shù)。在你綁定的驗證方法返回一個值(true,false)之后，Angular會在內(nèi)部調(diào)用$setValidity方法。驗證會在每一次輸入框的值改變($setViewValue被調(diào)用)或者模型的值改變。驗證發(fā)生在$parsers和$formatters成功運行之后，驗證不通過的項會做為ngModelController.$error的屬性存儲起來。
另外，在這個controller對象上，還有一個$asyncValidators對象，如果你的驗證是異步的，則需要加驗證附加在這個對象上，比如說用戶注冊時輸入手機號，我們需要在后端驗證該手機號是否已經(jīng)注冊，這個驗證方法必須return一個promise對象，然后在驗證通過時調(diào)用延遲對象的resolve，失敗時調(diào)用reject，還未完成的異步的驗證存儲在ngModelController.$pending中。
例如(注意其中的user對象，只有驗證通過了，才會將值綁定到模型上):
<form name="register_form" ng-submit="save()">
<div class="form-group">
<label for="phoneNumber">
手機號(不能重復(fù)):
</label>
<input type="text" class="form-control" ng-model="user.phoneNumber" id="phoneNumber" name="phoneNumber" required phone>
</div>
<div class="form-group">
<label for="username">
用戶名(必須大于五位):
</label>
<input type="text" class="form-control" ng-model="user.username" id="username" required username>
</div>
<button class="btn btn-block btn-primary" type="submit">提交</button>
</form>
<h3>用戶對象</h3>
<pre>
{{ user | json }}
</pre>
'use strict';
angular.module('app', [])
.directive('phone', function ($q, $http) {
return {
require: 'ngModel',
link: function (scope, ele, attrs, ctrl) {
ctrl.$asyncValidators.phone = function (modelValue, viewValue) {
var d = $q.defer();
$http.get('phone.json')
.success(function (phoneList) {
if (phoneList.indexOf(parseInt(modelValue)) >= 0) {
d.reject();
} else {
d.resolve();
}
});
return d.promise;
}
}
}
})
.directive('username', function ($q, $http) {
return {
require: 'ngModel',
link: function (scope, ele, attrs, ctrl) {
ctrl.$validators.username = function (modelValue, viewValue) {
if (modelValue) {
return modelValue.length > 5 ? true : false;
};
return false;
}
}
}
})
phone.json
[ 13758262732, 15658898520, 13628389818, 18976176895, 13518077986 ]
效果
下面一個完整的用戶注冊的表單驗證:
html:
<form name="register_form" novalidate>
<div class="form-group">
<label for="username">用戶名:</label>
<!-- ng-pattern="/PATTERN/"確保輸入項符合正則 -->
<input type="text" id="username" ng-model="user.username" class="form-control" name="username" required ng-pattern="/^[^#]*$/">
<span class="glyphicon glyphicon-ok right" ng-show="register_form.username.$valid"></span>
</div>
<div class="alert alert-danger" ng-show="register_form.username.$error.pattern">
<strong>請注意！</strong>
用戶名不能帶#號。
</div>
<div class="alert alert-danger" ng-show="register_form.username.$error.required && register_form.username.$touched">
<strong>請注意！</strong>
用戶名不能為空。
</div>
<div class="form-group">
<label for="_password">密碼:</label>
<!-- ng-minlength="num"讓密碼不能小于最小長度 -->
<input type="password" id="_password" ng-model="data._password" class="form-control" required ng-minlength="8" name="_password">
<span class="glyphicon glyphicon-ok right" ng-show="register_form._password.$valid"></span>
</div>
<div class="alert alert-danger" ng-show="register_form._password.$error.minlength && register_form._password.$touched">
<strong>請注意！</strong>
密碼長度不能少于八位。
</div>
<div class="alert alert-danger" ng-show="register_form._password.$error.required && register_form._password.$touched">
<strong>請注意！</strong>
密碼不能為空。
</div>
<div class="form-group">
<label for="password">確認密碼:</label>
<input type="password" id="password" ng-model="user.password" class="form-control" name="password" required pwd-repeat>
<span class="glyphicon glyphicon-ok right" ng-show="register_form.password.$valid"></span>
</div>
<div class="alert alert-danger" ng-show="register_form.password.$error.pwdRepeat && register_form.password.$touched">
<strong>請注意！</strong>
兩次輸入的密碼不相同。
</div>
<div class="alert alert-danger" ng-show="register_form.password.$error.required && register_form.password.$touched">
<strong>請注意！</strong>
請再次輸入密碼。
</div>
<div class="form-group">
<label for="phone">手機號:</label>
<div class="row">
<div class="col-sm-10">
<input type="num" id="phone" ng-model="user.phone" name="phone" class="form-control" required ng-minlength="11" ng-maxlength="11" phone>
</div>
<div class="col-sm-2">
<button class="btn btn-default" type="button" ng-disabled="register_form.phone.$invalid">發(fā)送驗證碼</button>
</div>
</div>
<span class="glyphicon glyphicon-ok right" ng-show="register_form.phone.$valid"></span>
</div>
<div class="alert alert-danger" ng-show="register_form.phone.$error.phone">
<strong>請注意！</strong>
該手機號已注冊過，可直接登錄。
</div>
<div class="alert alert-danger" ng-show="register_form.phone.$touched && !register_form.phone.$error.phone && (register_form.phone.$error.required || register_form.phone.$error.minlength || register_form.phone.$error.maxlength)">
<strong>請注意！</strong>
請輸入正確的手機號。
</div>
<div class="form-group">
<label for="code">驗證碼:</label>
<input type="text" id="code" ng-model="user.code" class="form-control" name="code" required>
<span class="glyphicon glyphicon-ok right" ng-show="register_form.code.$valid"></span>
</div>
<!-- 在表單不合法時禁用提交按鈕 -->
<button class="btn btn-block btn-primary" type="submit" ng-disabled="register_form.$invalid" ng-click="save()">提交</button>
</form>
js:
'use strict';
angular.module('app', [])
.controller('myCtrl', function ($scope) {
$scope.data = {};
$scope.save = function () {
alert('保存成功！')
}
})
// 判斷手機號是否重復(fù)
.directive('phone', function ($q, $http) {
return {
require: 'ngModel',
link: function (scope, ele, attrs, ctrl) {
ctrl.$asyncValidators.phone = function (modelValue, viewValue) {
var d = $q.defer();
$http.get('phone.json')
.success(function (phoneList) {
if (phoneList.indexOf(parseInt(modelValue)) >= 0) {
d.reject();
} else {
d.resolve();
}
});
return d.promise;
}
}
}
})
// 驗證兩次輸入的密碼是否相同的自定義驗證
.directive('pwdRepeat', function () {
return {
require: 'ngModel',
link: function (scope, ele, attrs, ctrl) {
ctrl.$validators.pwdRepeat = function (modelValue) {
// 當(dāng)值為空時，通過驗證，因為有required
if (ctrl.$isEmpty(modelValue)) {
return true;
}
return modelValue === scope.data._password ? true : false;
}
}
}
})
css:
.form-group {
position: relative;
}
.right {
position: absolute;
right: 10px;
top: 34px;
color: green;
}
phone.json:
[ 13758262732, 15658898520, 13628389818, 18976176895, 13518077986 ]
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
Webpack 實現(xiàn) AngularJS 的延遲加載
這篇文章主要介紹了Webpack 實現(xiàn) AngularJS 的延遲加載的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細介紹了基于AngularJS前端云組件最佳實踐,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
Angular 4 依賴注入學(xué)習(xí)教程之FactoryProvider的使用（四）
這篇文章主要給大家介紹了關(guān)于Angular 4 依賴注入之FactoryProvider使用的相關(guān)資料，文中介紹的非常詳細，對大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
解決Angular.Js與Django標(biāo)簽沖突的方案
AngularJS和django的模板都是用{{}}來引用變量的，這就導(dǎo)致了沖突，所以這篇文章主要就給大家介紹了如何解決Angular.Js與Django標(biāo)簽沖突的方案，有需要的朋友們可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
angularjs 表單密碼驗證自定義指令實現(xiàn)代碼
這篇文章主要介紹了angularjs 表單密碼驗證自定義指令實現(xiàn)代碼,需要的朋友可以參考下2016-10-10
AngularJS頁面訪問時出現(xiàn)頁面閃爍問題的解決
這篇文章主要介紹了AngularJS框架使用中出現(xiàn)頁面閃爍問題的解決方法,閃爍問題一般是初始化未加載完畢造成的,需要的朋友可以參考下2016-03-03
解決angular雙向綁定無效果,ng-model不能正常顯示的問題
今天小編就為大家分享一篇解決angular雙向綁定無效果,ng-model不能正常顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular應(yīng)用里異步打開對話框技術(shù)詳解
這篇文章主要為大家介紹了Angular應(yīng)用里異步打開對話框技術(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
淺談angular.js中實現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實現(xiàn)的。你可能會看到各種各樣的詞匯：$watch,$apply,$digest它們是如何工作的呢？這里我想回答這些問題，其實它們在官方的文檔里都已經(jīng)回答了，但是我還是想把它們結(jié)合在一起來講2015-10-10
這篇文章主要介紹了angularJS 中$attrs方法使用指南,需要的朋友可以參考下2015-02-02