Hybrid Apps開發系列之5.4：表單輸入驗證 (Form validation)

表單輸入驗證 (form validation) 是資料寫入資料庫的第一道檢查關卡，程式必須確認使用者已經輸入必要的資料，且一切格式都符合要求。Ionic專案的表單輸入驗證是採用AngularJS的驗證機制，基本程式碼如下：

<form name="form" novalidate>帳號:
  <input type="text" name="user" ng-model="username" required  />
  <span ng-show="form.user.$error.required">帳號不得為空</span>

  <input ng-disabled="form.user.$dirty && form.user.$invalid" type="submit" />
</form>

• 第1行：由於驗證結果（例如格式錯誤、未填寫等）必須透過表單存取，故必須設定name屬性，此處自訂表單的名稱為"form"，供後續存取驗證結果。另外novalidate表示關閉browser內定的驗證機制，由AngularJS進行驗證。
• 第2行：每個要做輸入驗證的欄位，都必須自訂name屬性值，此處自訂為"user"，如為必要欄位，則必須設定required。
• 第3行：驗證錯誤訊息。form.user代表第2行帳號填寫欄位。$error則是驗證結果出現錯誤。AngularJS內建了一些驗證程序，例如.requried會負責驗證有無填寫，因此使用$error.required代表未填寫。

下圖是加入驗證碼的三個欄位表單：

圖1. 三個欄位都加入驗證功能

程式碼如下：

• 第6行：設定表單name屬性值為'myForm'，並設定novalidate。
• 第9行：帳號欄位，須設定ng-model，name，且為必填欄位，故設定required。
• 第10行：驗證錯誤訊息，此為未填資料的錯誤狀況($error.required)。ng-show會在錯誤狀況發生時，才顯示訊息。
• 第14行：email欄位，設定ng-model，name，且為必填欄位，故設定required。
• 第15-16行：email欄位驗證錯誤訊息。email有格式錯誤的可能性，故多一行$error.email。ng-show會在錯誤狀況發生時，才顯示訊息。
• 第20行：密碼欄位，設定ng-model，name，且為必填欄位，故設定required。
• 第21行：密碼欄位驗證錯誤訊息($error.required)。
• 第24-27行：ng-disabled設定按鈕失效的條件。此處用到三個欄位的驗證狀況$dirty與$invalid。$dirty代表使用者已經輸入資料，$invalid代表目前驗證狀況屬於錯誤狀態。

index.html僅設定幾個$scope資料模型變數，完整程式碼可參考Gist範例。

表單驗證常用的屬性值如下：