directive做过滤器要人性化很多，但是如果是简单的过滤也可以使用filter来做，设置一个全局变量保存数据验证结果，等到提交表单的时候验证全局变量就可以了：
.directive("myFilter",function(){
var css = {
_valid:function(ele){
ele.removeClass("ng-invalid");
ele.next().removeClass("hide");
ele.next().removeClass("input_remove");
ele.next().removeClass("glyphicon-remove");
ele.addClass("ng-valid");
ele.next().addClass("input_ok");
ele.next().addClass("glyphicon-ok");
},
_invalid:function(ele){
ele.removeClass("ng-valid");
ele.next().removeClass("input_ok");
ele.next().removeClass("glyphicon-ok");
ele.addClass("ng-invalid");
ele.next().addClass("input_remove");
ele.next().addClass("glyphicon-remove");
}
};
return {
require:'ngModel',
link:function(scope,ele,arrts){
scope.$watch(arrts.ngModel,function(newVal,oldVal){
if(typeof newVal != "undefined"){
css._valid(ele);
if(typeof arrts.type != "undefined"){
switch (arrts.type){
case 'text':
if(typeof newVal != "string"){
css._invalid(ele);
}
if(typeof arrts.min != "undefined"){
if(newVal.length < arrts.min){
css._invalid(ele);
}
}
if(typeof arrts.max != "undefined"){
if(newVal.length > arrts.max){
css._invalid(ele);
}
}
break;
case 'number2':
var filter = /^[0-9]+.?[0-9]*$/;
if(!filter.test(newVal)){
css._invalid(ele);
}
if(typeof arrts.min != "undefined"){
if(newVal < parseInt(arrts.min)){
css._invalid(ele);
}
}
if(typeof arrts.max != "undefined"){
if(newVal > parseInt(arrts.max)){
css._invalid(ele);
}
}
break;
case 'email2':
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!filter.test(newVal)){
css._invalid(ele);
}
break;
}
}
}
});
}
};
})
.filter('email2',function(){
//感觉这个不人性化,也可能是我不会用吧
return function(input,length){
if(typeof input == "undefined" || length < input.length){
//c("输入不合规");
}
return input;
}
})
下面是style的代码:
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
.input_ok{
position: absolute;
z-index: 100;
right: 1%;
top: 8px;
color: #299429;
}
.input_remove{
position: absolute;
z-index: 100;
right: 1%;
top: 8px;
color: #ff0000;
}
.form-contant p{
position: relative;
}
下面是表单html的代码:
<div class="form-contant">
<h1>Register</h1>
<p>
<input type="text" ng-model="user_name" placeholder="请输入用户名" class="form-control" my-filter data="{{user_name|email2:4}}" min="4" max="20">
<i class="glyphicon glyphicon-ok hide"></i>
</p>
<p>
<input type="text" ng-model="user_pwd" placeholder="请输入密码" class="form-control" my-filter min="4" max="20">
<i class="glyphicon glyphicon-ok hide"></i>
</p>
<p>
<input type="number2" ng-model="age" placeholder="请输入年龄" class="form-control" my-filter min="4" max="102">
<i class="glyphicon glyphicon-ok hide"></i>
</p>
<p>
<input type="email2" ng-model="email" placeholder="请输入邮箱" class="form-control" value="" my-filter min="6" max="50">
<i class="glyphicon glyphicon-ok hide"></i>
</p>
<br>
<button type="button" class="form-control" ng-click="get()">get</button>
<button type="button" class="form-control" ng-click="save()">save</button>
<button type="button" class="form-control" ng-click="put()">put</button>
</div>
