表单验证
表单验证是angularJS一项重要的功能，能保证我们的web应用不会被恶意或错误的输入破坏。Angular表单验证提供了很多表单验证指令，并且能将html5表单验证功能同他自己的验证指令结合起来使用，进而在客户端验证时提供表单状态的实时反馈。
要使用表单验证，首先保证表单有一个name属性，一般的输入字段如最大，最小长度等，这些功能由html5表单属性提供，如果我们想屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记。
实例
插入一段项目中注册的表单实例
//HTML//注册 JS var registUrl = "/cds/w/user/register.do"; $scope.saveInfor = function(form) { form.$submitted = true; if (!form.$valid) return; var param = { loginId: $scope.model.loginId, password: $scope.model.password }; $resource(registUrl + '?' + $scope._urlParamEncode(param), null, { 'registerUser': { method: 'POST' } }).registerUser(param).$promise.then(function(result) { if (result.status === 'success') { $window.location.href = "/cds/portal/index.html"; } else { $scope.registerResultStatus = true; if (result.message && result.message.indexOf("已注册") > 0) { var htmlMsg = '您的邮箱|手机号已注册，请直接'; //登录 $scope.showLoginLinkFlag = true; $scope.errorMessage = $sce.trustAsHtml(htmlMsg); } else { $scope.errorMessage = result.message; } } }); };//登录按钮是否禁用（同意条框） $scope.agreeOrCanel = function() { var checkedState = $('#agree').attr('checked'); //记录当前选中状态 if (checkedState == 'checked') { $('#registerCustom').removeAttr('disabled'); } else { $scope.agreeDisable = false; $('#registerCustom').attr('disabled', true); } }
代码放上来了。可以下大致看一下，发现和之前使用的有何不同之处。
下面我们列举表单中input元素上用到的验证选项，比如：
1.必填项，设置某个表单输入是否已经填写，只需要在输入字段元素上添加require标记即可。2.最小（大）长度，验证表单输入的文本长度是否大于某个最小值，可以使用ng-minlength指令（ng-maxlength指令）
3.模式匹配，使用ng-pattern来确保输入匹配指定的正则表达式
4.电子邮件，只需要把input的类型设置为email即可
数字，只需要将input的类型设置为number在实例中，我们用到的是收拾好和邮箱都可验证登录，所以在匹配上的正则做文章。如下
5.同样我们也可以根据自定义的属性指令来定义一些校验规则，这里不做详细介绍。上一段代码吧。
app.directive('checkUsername', function($http) { return { link: function(scope, ele, attrs, c) { scope.$watch(attrs.ngModel, function(n) { if (!n) return; $http({ method: 'POST', url: '/api/check/' + attrs.username, data: { field: attrs.username, value: scope.ngModel } }).success(function(data) { //code }).error(function(data) { //code }) }); }} });
验证规则
由于表单的属性可以在其$scope对象中访问到，而我们又可以直接访问到$scope，因此js可以间接的访问DOM的表单属性，借助这些属性，我们可以对表单做出实时响应。
这些属性有：1.未修改的表单，用来判断用户是否修改了表单，如果修改了则为true，未修改则为false。
loginForm.loginId.$pristine
2.修改过的表单，只要用户修改过表单，无论输入是否通过验证，该值都将返回true
loginForm.loginId.$dirty
3.合法的表单，这个属性是用来判断表单的内容是否合法的，如果合法则该属性的值为true
loginForm.loginId.$valid
4.不合法的表单，这个属性与上个属性正好相反，如果不合法，则该属性值为true
loginForm.password.$invalid
5.错误，$error对象包含了当前表单的所有验证内容，以及它们是否合法的信息，如果验证失败，该属性值为true，如果验证成功，则该值为false
loginForm.password.$error
6.表单的提交验证。
loginForm.$submitted
给form加上name="loginForm"意味着表单的名称是loginForm。如何使用loginForm,比如我们验证表单是否被修改过loginForm.$submitted;
loginForm是$scope中的一个属性
ng-class根据注册状态和提交状态获取不同样式。
验证提示
这是在angular1.3版本之后对angular表单验证的优化。它不再需要一个详细的表达式状态创建元素显示或隐藏。看看项目中的代码。
手机号或邮箱不能为空手机号或邮箱格式错误手机号或邮箱长度不超过20位
可以看出，angular通过$error来监视模型的变化，因为$error中包含了错误的详细信息，
用ng-message=""绑定验证类型。会根据$error错误类型提示错误信息。同时，如果我们的应用场景中如果同时，有好几处错误，那么，上面代码按照ng-message的顺序只会显示一条错误信息，如果我们需要全部显示出来只需要添加 ng-messages-multiple。这里只做范例介绍，小伙伴们在项目中合理运用就好。