今天完成的事：之前用的ng-messages去做表单验证，今天试着去用原生的表单验证去弄，发现虽然代码繁琐了很多，但是能让人知道这代码的作用是什么，用起来很舒服，虽然也容易出错，但改起来确实比插件有成就感，通过手动验证，能明白当初做js5的时候是怎么运用高级点的表单验证，所谓手动验证是通过AngularJS表单的属性来验证，而成为AngularJS表单必须满足两个条件： 1、给form元素加上novalidate="novalidate"； 2、给form元素加上name="theForm"。

明天计划完成的事：继续学习小程序，下载小程序的开发工具，同时请教下师兄这和vue到底有什么共通的地方。

遇到的问题：用ng-messages的时候感觉对于select标签的表单验证还是不熟，用起来没那么好使，但自己去查攻略查不到好的资料，尴尬。

收获：原生验证的文章http://www.jb51.net/article/78987.htm，写的很详细，只要套用即可。

 <div class="container main-content" ng-controller="myCtrl1">
                      <!--novalidate让表单不要使用html验证-->
                      <!--theForm变成scope的一个字段-->
                      <form ng-submit="onSubmit(theForm.$valid)" novalidate="novalidate" name="theForm">
                          <div class="form-group">
                              <label for="name">Name</label>
                              <input type="text" class="form-control" id="name" ng-model="formModel.name"/>
                          </div>

                          <div class="form-group" ng-class="{
'has-error': !theForm.email.$valid && (!theForm.$pristine || theForm.$submitted),
'has-success': theForm.email.$valid && (!theForm.$pristine || theForm.$submitted)
}">
                              <label for="email">Email</label>
                              <input type="email" class="form-control" id="email" ng-model="formModel.email" required="required" name="email"/>
                              <p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)">必填</p>
                              <p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)">email格式不正确</p>
                          </div>

                          <div class="form-group">
                              <label for="username">Username</label>
                              <input type="text" class="form-control" id="username" ng-model="formModel.username"/>
                          </div>

                          <div class="form-group">
                              <label for="age">Age</label>
                              <input type="number" class="form-control" id="age" ng-model="formModel.age"/>
                          </div>

                          <div class="form-group">
                              <label for="sex">Sex</label>
                              <select name="sex" id="sex" class="form-control" ng-model="formModel.sex">
                                  <option value="">Please choose</option>
                                  <option value="male">Mail</option>
                                  <option value="femail">Femail</option>
                              </select>
                          </div>

                          <div class="form-group">
                              <label for="password">Password</label>
                              <input type="text" class="form-control" id="password" ng-model="formModel.password"/>
                          </div>

                          <div class="form-group">
                              <button class="btn btn-primary" type="submit">Register</button>
                          </div>
<pre>{{theForm | json}}</pre>
                      </form>

</div>

• 给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
• 通过<pre>{{theForm | json}}</pre>把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);
    };
});