本文是对AngularJS表单验证，手动验证或自动验证的讲解，对学习JavaScript编程技术有所帮助，感兴趣的小伙伴们可以参考一下
AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证。
一、手动验证
所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件：
1、给form元素加上novalidate=”novalidate”；
2、给form元素加上name=”theForm”，如下：
<title></title> <nav> <div class="container"> <div class="navbar-header"> Form Submitting</div></div></nav><div class="container main-content"> <!--novalidate让表单不要使用html验证--><!--theForm变成scope的一个字段--> <div class="form-group"> <label for="name">Name</label></div><div class="form-group"> <label for="email">Email</label><p class="help-block">必填</p><p class="help-block">email格式不正确</p></div><div class="form-group"> <label for="username">Username</label></div><div class="form-group"> <label for="age">Age</label></div><div class="form-group"> <label for="sex">Sex</label> Please chooseMailFemail</div><div class="form-group"> <label for="password">Password</label></div><div class="form-group"> <button class="btn btn-primary" type="submit">Register</button></div><pre class="prettyprint linenums"> {{theForm | json}}
● 给form加上novalidate=”novalidate”意味着表单将不再使用HTML5验证特性
● 给form加上name=”theForm”意味着表单的名称是theForm。如何使用theForm,比如我们验证表单是否被修改过theForm.$submitted
● 通过ng-submit提交表单
● formModel是$scope中的一个属性
● 对表单的Email进行了手动验证，使用了AngularJS表单的众多属性，比如theForm.email.$valid，theForm.$pristine，theForm.$submitted， theForm.email.$error.required，theForm.email.$error.email
● 通过
{{theForm | json}}
把AngularJS表单的所有属性都打印出来
{ "$error": { "required": [ { "$validators": {}, "$asyncValidators": {}, "$parsers": [], "$formatters": [ null ], "$viewChangeListeners": [], "$untouched": true, "$touched": false, "$pristine": true, "$dirty": false, "$valid": false, "$invalid": true, "$error": { "required": true }, "$name": "email", "$options": null } ] }, "$name": "theForm", "$dirty": false, "$pristine": true, "$valid": false, "$invalid": true, "$submitted": false, "email": { "$validators": {}, "$asyncValidators": {}, "$parsers": [], "$formatters": [ null ], "$viewChangeListeners": [], "$untouched": true, "$touched": false, "$pristine": true, "$dirty": false, "$valid": false, "$invalid": true, "$error": { "required": true }, "$name": "email", "$options": null }, "sex": { "$validators": {}, "$asyncValidators": {}, "$parsers": [], "$formatters": [], "$viewChangeListeners": [], "$untouched": true, "$touched": false, "$pristine": true, "$dirty": false, "$valid": true, "$invalid": false, "$error": {}, "$name": "sex", "$options": null } }
以上，凡是有name属性的input都被显示在上面。
在second.js文件中定义了module,controller以及提交表单的方法。
var myApp1 = angular.module('myApp1',[]); myApp1.controller('myCtrl1', function($scope, $http){ $scope.formModel = {}; $scope.onSubmit = function(){ $http.post('someurl',$scope.formModel) .success(function(data){ console.log(':)'); }) .error(function(data){ console.log(':('); }); console.log($scope.formModel); }; });
以上的表单来源gaodai#ma#com搞@代~码网验证方式好处是可控性强，但相对繁琐。
二、自动验证
AngularJS的另外一种表单验证方式是自动验证，即通过directive来实现，除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module。
有关angular-auto-validate：
● 安装：npm i angular-auto-validate
● 引用：
● module依赖：var myApp = angular.module(“app”, [“jcs-autoValidate”]);
为了实现错误信息本地化，还需要angular-localize这个第三方module：
● 安装：npm install angular-localize –save
● module依赖：var myApp = angular.module(“app”, [“localize”]);
● 引用：
此外，当点击提交表单按钮，需要禁用按钮并显示一种等待效果，需要用到angular-ladda这个第三方module:
● 安装：bower install angular-ladda –save
● module依赖：var myApp = angular.module(“app”, [“angular-ladda”]);
● 引用：
页面如下：
<title></title> <nav> <div class="container"> <div class="navbar-header"> Form Validating Auto</div></div></nav><div class="container main-content"> <!--novalidate让表单不要使用html验证--><!--theForm变成scope的一个字段--> <div class="form-group"> <label for="name" class="control-label">Name</label></div><div class="form-group"> <label for="email" class="control-label">Email</label></div><div class="form-group"> <label for="username" class="control-label">Username</label></div><div class="form-group"> <label for="age" class="control-label">Age</label></div><div class="form-group"> <label for="sex" class="control-label">Sex</label> Please chooseMailFemail</div><div class="form-group"> <label for="password" class="control-label">Password</label></div><div class="form-group"> <!--<button class="btn btn-primary">Register</button>--><button class="btn btn-primary" type="submit"> <span>正在注册...</span><span>注册</span></button></div><pre class="prettyprint linenums"> {{formModel | json}}
