今天完成的事：学习angular的表单验证

明天要做的事：学习原生的js

收货：

<div class="form-group" ng-class="{'has-success':signUpForm.username.$valid}">
    <label>用户名：</label>
    <!--<pre>{{signUpForm.username}}</pre>-->
    <input type="text"
           ng-model="userdata.username"
           name="username"
           class="form-control"
           ng-minlength="4"
           ng-maxlength="32"
           required
    >
    <i class="fa fa-check-circle fa-2x input-result success" ng-if="signUpForm.username.$valid"></i>
    <p class="error" ng-if="signUpForm.username.$error.required&&signUpForm.username.$touched">
        用户名不可为空
    </p>
    <p class="error" ng-if="signUpForm.username.$error.minlength||signUpForm.username.$error.maxlength&&signUpForm.username.$touched">
        请输入4-32位的用户名
    </p>
    </div>

一般验证的部分有：require 是否必填

长度minlength 和maxlength 

然后可以通过正则表达式来验证数字字母的一些格式

那点就在于手写指令compare 来比对两次输入密码是否一致

angular.module('myApp',[])
    //.controller('MainController',function($scope){
    //$scope.submitForm=function(){
    //    console.log('表单提交啦');
    //}
    //})
    .controller('SignUpController',function($scope){

        $scope.userdata={

        };//用于存储表单数据

        $scope.submitForm=function() {
            console.log($scope.userdata);
            if ($scope.signUpForm.$invalid) {

                alert("请检查您的信息");
            }
            else {
                alert("提交成功！")
            }
        }
        })
    .directive('compare',function(){
        var o = {};
        o.strict = 'AE';
        o.scope = {
            orgText: '=compare'
        }
        o.require = 'ngModel';
        o.link = function(sco, ele, att, con){
            con.$validators.compare = function(v){
                return v == sco.orgText;
            }

            sco.$watch('orgText', function(){
                con.$validate();
            })
        }
        return o;
    })

还是需要好好消化一下，真的有点难度