AngularJS实现表单验证
内容摘要
虽然我不是前端程序员，但明白前端做好验证是多么重要。
因为这样后端就可以多喘口气了，而且相比后端什么的果然还是前端可以提高用户的幸福感。
AngularJS提供了很方便的表
因为这样后端就可以多喘口气了，而且相比后端什么的果然还是前端可以提高用户的幸福感。
AngularJS提供了很方便的表
文章正文
虽然我不是前端程序员，但明白前端做好验证是多么重要。
因为这样后端就可以多喘口气了，而且相比后端什么的果然还是前端可以提高用户的幸福感。
AngularJS提供了很方便的表单验证功能，在此记录一番。
首先从下面这段代码开始
'sweet_dreams@aliyun.com';
}]);
</script>
}]);
</script>
input标签的一些验证选项，通常和HTML5标记搭配使用。
必填
<input type="text" required />
长度
使用指令ng-minlength/ng-maxlength
<input type="text" ng-minlength="5" />
特定格式
例如电子邮件、URL、数字，将type设置为相应类型即可，例如：
'sweet_dreams@aliyun.com';
}])
.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;});
});
}
}
}]);
}])
.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的状态发生变化。
表单也跟着改变一下，使用方法如下:
'K@gmail.com',
'a@gmail.com',
'v@gmail.com',
'l@gmail.com',
'e@gmail.com',
'z@gmail.com'];
for (var i=0;i<emailTable.length;i+=1)
if(val==emailTable[i])
return;
ctrl.$setValidity('emailAvailable', true);
return val;
})
}
}
})
'a@gmail.com',
'v@gmail.com',
'l@gmail.com',
'e@gmail.com',
'z@gmail.com'];
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>
代码注释
作者：喵哥笔记
