先上圖

看到紅色箭頭所示，有注意兩點：

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"