AngularJS自定义表单验证功能实例详解(2)

'use strict'; angular.module('app', []) .controller('myCtrl', function ($scope) { $scope.data = {}; $scope.save = function () { alert('保存成功！') } }) // 判断手机号是否重复 .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) { // 当值为空时，通过验证，因为有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 ]

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》