虽然我不是前端程序员，但明白前端做好验证是多么重要。
因为这样后端就可以多喘口气了，而且相比后端什么的果然还是前端可以提高用户的幸福感。
AngularJS提供了很方便的表单验证功能，在此记录一番。
首先从下面这段代码开始
[url=]'sweet_dreams@aliyun.com'[/url];
}]);
</script>
input标签的一些验证选项，通常和HTML5标记搭配使用。
必填
<input type="text" required />
长度
使用指令ng-minlength/ng-maxlength
<input type="text" ng-minlength="5" />
特定格式
例如电子邮件、URL、数字，将type设置为相应类型即可，例如：
[url=]'sweet_dreams@aliyun.com'[/url];
}])
.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的状态发生变化。
表单也跟着改变一下，使用方法如下:
[url=]'K@gmail.com'[/url],
[url=]'a@gmail.com'[/url],
[url=]'v@gmail.com'[/url],
[url=]'l@gmail.com'[/url],
[url=]'e@gmail.com'[/url],
[url=]'z@gmail.com'[/url]];
for (var i=0;i<emailTable.length;i+=1)
if(val==emailTable[i])
return;
ctrl.$setValidity('emailAvailable', true);
return val;
})
}
}
})
Input元素中加上is-already-taken属性，并且再加一个ng-message:
<p class="error" ng-message="emailAvailable">Already taken! try other email addresses!</p>
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
