AngularJS學習之 登陸表單 清爽驗證（邊學邊更新）

註冊過程的確好多須要驗證的，可是註冊成功以後的登陸就簡單多了，

只要用戶 輸入 用戶名和密碼，

ajax向後臺提交登陸請求，

根據返回的結果肯定用戶名或者密碼是否正確便可登陸。

因此這個登陸表單的驗證是很是簡單清晰的

 

<div class="wrap" ng-controller="LoginCtrl">
  <fieldset>
    <legend>後臺登陸系統</legend>
    <form>
      <p>
        <label>用戶名</label>
        <input name="user" ng-model="username"  class="user" autofocus="autofocus"  ng-keyup="myKeyup($event)"/>/*經過添加ng-keyup時間當用戶輸入好用戶名和密碼直接按回車鍵就能夠登陸，無須再點擊登陸按鈕，方便了用戶*/
      </p>/*autofocus屬性讓光標自動聚焦在用戶名輸入框，用戶能夠直接輸入，無須再點一下鼠標才能定位*/
      <p>
        <label>密&#12288;碼</label>
        <input name="password" ng-model="password" class="password" type="password"  ng-keyup="myKeyup($event)" />
        <span class="warning" ng-model="warning" ng-show="warning">{{warning}}</span>/*經過ng-model與後臺js代碼中設置的變量warning創建關係，若是warning有值，
就說明ng-show的表達式爲true，相應的錯誤信息就會顯示出來*/
      </p>**
      <p>
        <input type="button" ng-click="login()" class="button" value="登陸" />
      </p>
    </form>
  </fieldset>
</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

附加：HTML

<form role="form" name="myForm" ng-model="myForm"  class="form-horizontal">/*必須設置name屬性，用於ng-show調用*/
 <div class="form-group">
 　　<label class="col-sm-2 control-label">標題名稱</label> 
　　　　<div class="col-sm-10"> 
　　　　　　<input type="text" name="name" class="form-control" placeholder="請輸入標題名稱" required ng-model="article.name"/>/*必須設置name屬性，用於ng-show調用*/
　　　　　　 <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.name.$valid"></span>/*當name輸入有效時才顯示*/ 
　　　　</div> 
　</div>

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-success" ng-disabled="myForm.$invalid" >提交</button>/*當myForm全部設置了ng-model的屬性都輸入了正確的值，提交按鈕纔會可用，不然處於禁用狀態*/
  </div>
</div>

</form>