angular實現表單驗證及提交功能，angular表單

angular實現表單驗證及提交功能，angular表單

本例通過Angular架構來實現簡單的表單驗證

一、html結構

1、藉助於bootstrap快速的編寫了一個簡單的表單
代碼主要部分如下： 

<div class="container" style="margin-top: 30px;" ng-controller="myCtrl">  <h1 style="text-align: center">使用者表單提交</h1>  <form action="upload.js" class="form-horizontal" name="myForm">    <div class="form-group">      <label for="username" class="col-sm-3 control-label">使用者名稱</label>      <div class="col-sm-9">        <input type="text" autocomplete="false" name="username" placeholder="使用者名稱" ng-model="data.username" id="username" class="form-control" required>        <div class="alert alert-danger help-block" >          使用者名稱長度不能小於5位        </div>        <div class="alert alert-danger help-block" >          使用者名稱長度不能大於15位        </div>      </div>    </div>  </form> </div>

2、表單驗證常見問題及指令

1）、問題：
》如何綁定資料——雙向繫結
》驗證表單——Regex
》顯示錯誤資訊
》整個Form的驗證
》避免提交沒通過驗證的表單
》防止多次提交
2）、常用指令
》指令：
ng-model,ng-required,ng-pattern,ng-maxlength,ng-minlength,ng-change
》樣式：
ng-valid,ng-invalid,ng-pristine,ng-dirty
》form控制變數
formName.inputFieldName.$error:欄位錯誤資訊
formName.inputFieldName.$dirty:欄位是否修改
formName.inputFieldName.$pristine:欄位是否是初始狀態
formName.inputFieldName.$valid:欄位是否有效
formName.inputFieldName.$invalid:欄位是否無效

二、功能實現

2.1 使用者名稱驗證
使用者輸入使用者名稱欄位驗證主要是長度驗證，以及是否必須

1、ng-model綁定表單資料，以便使用angular的驗證api
2、ng-minlength,ng-maxlength規定欄位長段，required規定欄位必填
3、錯誤提示資訊通過formName.inputFieldName.$error.minlength/maxlength決定是否要顯示，當輸入不合法時，$error對應的錯誤資訊會為true
如下：

  <div class="form-group">    <label for="username" class="col-sm-3 control-label">使用者名稱</label>    <div class="col-sm-9">      <input type="text" autocomplete="false" name="username" placeholder="使用者名稱" ng-model="data.username" id="username" ng-minlength="5" ng-maxlength="15" class="form-control" required>      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.minlength">        使用者名稱長度不能小於5位      </div>      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.maxlength">        使用者名稱長度不能大於15位      </div>    </div>  </div>

2.2 密碼確認驗證

使用者密碼確認驗證需要保證兩次輸入的密碼一致，且在未輸入確認密碼前不驗證

1、綁定資料ng-model=data.pwdConfirm（所有表單資料都儲存到data對象中）
2、通過判斷data.pwdConfirm!==data.password確定兩次密碼是否輸入一致
3、通過formName.inputField.$dirty確定此項是否填寫過

  <div class="form-group">    <label class="col-sm-3 control-label">確認密碼</label>    <div class="col-sm-9">      <input type="password" name="pwdConfirm" ng-model="data.pwdConfirm" placeholder="確認密碼" id="pwdConfirm" required class="form-control">      <div class="alert alert-danger" ng-show="data.pwdConfirm!==data.password&&myForm.pwd.$dirty">        兩次輸入的密碼不一致      </div>    </div>  </div>

2.3 郵箱驗證

郵箱驗證主要驗證郵箱格式是否正確，欄位長度

1、使用H5中新增type屬性值email作為
2、通過ng-pattern指令定義郵箱驗證的正則
3、郵箱驗證常用Regex：^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+
4、通過myForm.email.$error.pattern驗證郵箱格式是否正確

  <div class="form-group">    <label class="col-sm-3 control-label">郵箱</label>    <div class="col-sm-9">      <input type="email" name="email" ng-model="data.email" placeholder="郵箱" class="form-control" required ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/">      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.minlength">        郵箱長度不能小於5位      </div>      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.pattern">        請填寫正確的郵箱格式      </div>      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.maxlength">        郵箱長度不能大於30位      </div>    </div>  </div>

2.4 單複選框

單複選框主要確定資料繫結問題，以及複選框的資料渲染
1、通過以data對象的屬性形式來綁定資料
2、多選的選項值通過ng-repeat進行遍曆
3、設定value值以便提交時對值進行區分

  <div class="form-group">    <label class="col-sm-3 control-label">性別</label>     <div class="col-sm-9">       <label class="radio-inline">         <input type="radio" name="sex" value="1" ng-model="data.sex" />男       </label>       <label class="radio-inline">         <input type="radio" name="sex" value="0" ng-model="data.sex" />女       </label>     </div>  </div>   <div class="form-group">    <label class="col-sm-3 control-label">愛好</label>     <div class="col-sm-9">       <label class="radio-inline" ng-repeat="hobby in hobbies">         <input type="checkbox" name="hobby" ng-model="hobbiesC" value="{{hobby.id}}" /> {{hobby.name}}       </label>     </div>  </div>  <div class="col-sm-9 col-sm-offset-3">    <input type="reset" class=" btn btn-danger" value="重設">    <input type="submit" class="btn btn-primary " value="提交">  </div>

2.5 城市二級聯動

1、城市資料定義：每個城市對象包括id,parent,name屬性，id為每個城市省份專屬，parent是根據父級省份或城市而定
2、通過ng-options指令來遍曆出城市資料

2.5.1 城市資料模型

通過\$scope.cities定義資料模型

   $scope.cities=[    {      id:1,      parent:0,      name:'四川省'    },    {      id:2,      parent:1,      name:'成都市'    },    ...  ]

2.5.2 html中渲染城市資料

通過ng-options指令和ng-model指令遍曆資料和設定預設值

  <div class="form-group">    <label class="col-sm-3 control-label">出生地</label>     <div class="col-sm-3">       <select name="birthAddress" id="" ng-model="data.province" ng-options="c.id as c.name for c in cities">         <option value="">-- 請選擇 --</option>       </select>     </div>  </div>

說明：
1、ng-options=”obj.name for obj in datas” 常見用法，通過 obj.id as obj.name設定option標籤的value值為id，內容為name
2、ng-model可用於設定select的預設值
2.5.3 定義過濾器用於過濾省份，城市等

.filter("cityFilter",function(){  return function(input,parent){    var filtedData=[];    angular.forEach(input,function(value,key){      if(value.parent===parent){        filtedData.push(value)      }    })    return filtedData;  }})

說明：
1、如上通過定義cityFilter，傳入一個parent作為參數，遍曆傳入的資料，並寬判斷是否與傳入的parent相等來確定當前城市是哪一級
2、返回的filtedData即是過濾結果。
3、用到了angular.forEach(obj,fn)迭代器，其中fn有三個參數傳入，分別是value,key,obj；value即為當前遍曆出的對象，key為遍曆的唯一標識，obj為被遍曆的數組或對象本身。
使用（省份）： ng-options="c.id as c.name for c in cities|cityFilter:0"

2）、城市對應選擇
1、根據data.province作為過濾參數，進行城市篩選
2、地區的選擇同理，可設定當選擇了城市後，再出現地區選項框（ng-show指令）

  <div class="col-sm-2">    <select name="birthC" ng-model="data.cities" ng-options="c.id as c.name for c in cities|cityFilter:data.province">      <option value="">-- 請選擇 --</option>    </select>  </div>  <div class="col-sm-2" ng-show="!myForm.birthC.$pristine">    <select name="birthD" ng-model="data.district" ng-options="c.id as c.name for c in cities|cityFilter:data.cities">      <option value="">-- 請選擇 --</option>    </select>  </div>

2.6 表單提交

1、功能需求：當表單驗證不通過時，使提交按鈕失效（ng-disabled）,

html結構：

  <div class="col-sm-9 col-sm-offset-3">    <input type="reset" class=" btn btn-danger" value="重設" ng-click="reset()">    <input type="submit" class="btn btn-primary " value="提交" ng-disabled="myForm.$invalid">  </div>

js:

  $scope.reset=function(){    $scope.myForm.$setPristine();  }

註：表單中有一個$setPristine()方法將表單複位原始狀態，class,$dirty,$pristine會恢複原始狀態。但注意表單的錯誤資訊$error並不會被隱藏，所以在驗證表單時，記得在每一項錯誤資訊都是由$dirty才判斷的。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。