前言
通常，使用angular做表单验证，一般都是把验证规则单独写为service，然后通过依赖注入的方式调用。在个别情况下，例如用户注册表单，需要根据用户输入给出不同提示信息，使用service略显不合适宜，所以可以采用指令的方式。
简易表单
如下为一个简易表单，有四项提示信息，依据状态呈现。校验规则为数字，大写字母，小写字母至少出现两项，通过正则配合ng-pattern能够实现相同的效果，此处仅为引入指令校验，不做深究。其中，user-validator为自定义指令。
rush:js;">
angular.module('shuffleApp',[])
.directive('userValidator',['$log',function($log) {
return {
restrict: 'A',require: 'ngModel',link: function($s
cope,$element,$attrs,$ngModelCtrl) {
var verifyRule = [/^\d+$/,/^[a-z]+$/,/^[A-Z]+$/];
var verify = function(input) {
return !(verifyRule[0].test(input) ||
verifyRule[1].test(input) ||
verifyRule[2].test(input));
};
$ngModelCtrl.$parsers.push(function(input) {
var validity = verify(input);
$ngModelCtrl.$setValidity('defined',validity);
return validity ? input : false;
});
$ngModelCtrl.$formatters.push(function(input) {
var validity = verify(input);
$ngModelCtrl.$setValidity('defined',validity);
return validity ? input : false;
})
}
}
}]);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
