用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

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