给出的例子中仅仅是一个email的验证就写了这么多,如果再加几个field,再加几种不同的提示,再加上几个事件,代码会变得杂乱不堪。
事实上并不推荐这样做,我们有更好的方法。
就是使用angular-messages.js
首先,不要忘了这两步
angular.module('myApp',['ngMessages'])
好,先用ng-messages和ng-message替换掉那些重复的东西,上面的例子变成:
功能上没有任何变化,只是把重复的代码全部去掉了。
注意区分ng-messasges和ng-message,有没有感觉有点像with()? 后面的ng-messages-multiple,这里用作同时让多个提示出现。
但这样仍然不够好,就算省去了ng-message中的内容,但是多个field中都存在required验证时仍然会有重复。
而且,如果不同页面中的表单都涉及到相同的内容时重复的验证提示会越来越多。
为了解决这个问题,我们可以使用ng-messages-include指令。
该指令用来引用模板,比如上面的例子变为:
Email:
并不复杂,我们再加点东西。
为了让提示更友好(?)一些,我们试试实现光标离开后出现提示的效果。
这时候用指令(directive)会方便很多,在这里先涉及一点和指令相关的内容。
先运行起来再说:
;
}])
.directive('hintOnBlur',[function() {
return {
require: 'ngModel',
link: function(scope,element,attrs,ctrl) {
ctrl.focused = false;
element.bind('focus',function(evt) {
scope.$apply(function() {ctrl.focused = true;});
}).bind('blur',function(evt) {
scope.$apply(function() {ctrl.focused = false;});
});
}
}
}]);
此处我们用focused来判断光标是否在某个属性上,当使用了hintOnBlur指令的对象上发生focus或blur事件时focused的状态发生变化。
表单也跟着改变一下,使用方法如下:
Email:
在ng-show中再加入对focused的判断,false时出现提示。
现在看起来像那么回事了。
自定义验证方式与有效性(validity),这个也用到指令(directive)。
验证填写的email是否已占用,这里简单模拟一下:
404">
.directive('isAlreadyTaken',function() {
return {
require: 'ngModel',ele,ctrl) {
ctrl.$parsers.push(function(val) {
ctrl.$setValidity('emailAvailable',false);
var emailTable = [
,
,
,
,
,
];
for (var i=0;i
Input元素中加上is-already-taken属性,并且再加一个ng-message: