最近在使用angular框架做一款进销存的系统,其中用到了用户名唯一性的校验。折腾了2天也没有搞明白,辗转反侧难以入睡呀。后经大师指点,终于柳暗花明。废话不多说。我先粘贴部分代码供大家把玩一下(由于是公司项目,不便把整个篇代码贴出,请大家谅解)。
register.html
<div class="form-group">
<label class="col-sm-2 control-label">手机号</label>
<div class="col-sm-10">
<input type="text" class="form-control" ensure-unique placeholder="手机号" ng-model="mobile"
ng-pattern="/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/" required>
<span style="color:#f05050" ng-show='form.mobile.$error.unique'>手机号已存在</span>
</div>
</div>
不是说用户名吗,怎么是手机号呀?不好意思,因为业务需要我们把手机号作为唯一标识。
js代码
angular.module('app')
.directive('ensureUnique', function($http) {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
scope.$watch(attrs.ngModel, function (value) {
console.log(value);
if (!value) return;
$http({
method: 'GET',
url: scope.app.host+"/user/verify/username/"+value,
}).success(function (data) {
if(data.status === 80200) {
// ctrl.$setValidity('unique', data);
console.log('unique=true');
ctrl.$setValidity('unique', true);
} else {
console.log('unique=false');
ctrl.$setValidity('unique', false);
}
// console.log(data);
}).error(function (data) {
ctrl.$setValidity('unique', false);
})
})
}
}
});
这样就可以实现我们需求了