用angular做表单验证

先上图

看到红色箭头所示，有注意两点：

1. 当文本框获得焦点的时候，有一个box-shadow的效果
2. 同时会有验证

都知道input是单标签（不闭合）的元素，为了实现这个效果，就需要用到div将input包围起来，如下：

 <div ng-class="{focus:myfocus,blur:myblur}">
                <label for="uName">
                    <img src="img/aa.jpg" alt=""/>
                </label>
                <input type="text";
                       id="uName";
                       name="uName";
                       ng-model="person.name"
                       ng-focus="myfocus=true;myblur=false;" ;
                        ng-blur="myfocus=false;myblur=true";
                       required
                       ng-maxlength=14
                       ng-minlength="5"
                       />

                <div class="error" ng-show="uForm.uName.$dirty && uForm.uName.$invalid">
                    <small ng-show="uForm.uName.$error.maxlength">最大长度位14</small>
                    <small ng-show="uForm.uName.$error.minlength">最小长度位5</small>
                    <small ng-show="uForm.uName.$error.required">必须输入</small>
                </div>
            </div>

这样的话，结构就成了

<div>
    <label></label>
    <input type='text'>
    <div class='error'></div>
</div>

为了达到获得焦点使父元素具有focus样式，就需要用到angular的ng-class指令

ng-class="{focus:myfocus,blur:myblur}"

同时myfocus/myblur的真假值在input元素中用ng-focus判断
像这样子

ng-focus="myfocus=true;myblur=false";
ng-blur="myfocus=false;myblur=true";

对于表单验证像下面这样
注意required不是ng-required

required
ng-maxlength=14
ng-minlength="5"