使用ngMessages進行AngularJS表單驗證

幾乎每個網站都使用表單來執行不同的任務，例如註冊使用者或取得他們的聯絡資訊。確保填寫表單的使用者至少在輸入欄位中輸入有效資訊非常重要。

還需要向使用者顯示詳細的錯誤訊息，以便他們能夠正確填寫表單。當您必須處理大量表單元素時，這個過程可能會變得非常複雜，每個表單元素都需要自己的自訂錯誤訊息。為了減輕痛苦，Angular 1.3 新增了一個名為 ngMessages 的新模組來幫助開發人員輕鬆驗證表單。

ngMessages 模組可讓您向使用者顯示自訂錯誤訊息，而無需編寫重複的程式碼。在本教程中，您將學習如何使用此模組來驗證您的表單。您還將學習如何從外部載入錯誤訊息並僅在實際需要時顯示訊息。

一個基本範例

讓我們先在有或沒有 ngMessages 幫助的情況下驗證單一輸入字段，以了解該模組的有用性。如果不使用 ngMessages，輸入元素的標記將類似於以下程式碼：

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputname" ng-minlength="6" ng-maxlength="12" required>
    <p ng-show="formValidation.username.$error.minlength">Username should have at least 6 characters.</p>
    <p ng-show="formValidation.username.$error.maxlength">Username should have at most 12 characters.</p>
    <p ng-show="formValidation.username.$error.required">Providing a username is mandatory.</p>

</form>

您還需要以下 JavaScript 程式碼：

angular.module('app', []);

所有其他表單元素都需要進行類似的驗證。這將使標記非常重複，增加出錯的機會。如果您決定使用 ngMessages 來驗證相同的表單輸入，則標記將類似於以下程式碼：

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputname" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.username.$error">
      <p ng-message="minlength">Username should have at least 6 characters.</p>
      <p ng-message="maxlength">Username should have at most 12 characters.</p>
      <p ng-message="required">Providing a username is mandatory.</p>
    </div>

</form>

JavaScript 程式碼現在會變成：

angular.module('app', ['ngMessages']);

在這裡，我們使用 ng-messages 指令將錯誤訊息分組在一起。傳遞給 ng-messages 指令的值遵循下列模式 formName.inputName.$error。在我們的例子中，其計算結果為 formValidation.username.$error。

類似地，您也可以取得所有其他欄位的 ng-messages 指令的值。 ngMessages 依賴 ngModel 指令公開的 $error 物件來決定是否應在網頁上顯示或隱藏錯誤訊息。它會循環遍歷 $error 對象，尋找與任何 ng-message 指令的值相符的鍵。

這是一個工作範例，顯示了上述驗證程式碼的實際作用：

驗證表單

在本部分中，我們將驗證包含使用者名稱、密碼和電子郵件欄位的表單。表單的標記將類似於以下程式碼：

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="formValidation.username.$error">
      <p ng-message="minlength">Username should have at least 6 characters.</p>
      <p ng-message="maxlength">Username should have at most 12 characters.</p>
      <p ng-message="required">Providing a username is mandatory.</p>
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
    </div>
    
    <label>Password</label>
    <input type="text" name="userPassword" ng-model="inputPassword" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.userPassword.$error">
      <p ng-message="minlength">Password should have at least 6 characters.</p>
      <p ng-message="maxlength">Password should have at most 12 characters.</p>
      <p ng-message="required">Providing a password is mandatory.</p>
    </div>
    
    <label>Email</label>
    <input type="email" name="userEmail" ng-model="inputEmail" required>
    <div ng-messages="formValidation.userEmail.$error">
      <p ng-message="email">Please enter a valid email address.</p>
      <p ng-message="required">Providing an email is mandatory.</p>
    </div>
</form>

如您所看到的，驗證不同表單元素所需的標記非常相似。本例中一個重要的變化是新增了 ng-pattern 指令。我們在這裡使用的模式確保輸入的用戶名僅包含字母數字字元和下劃線。 \w 位於 /^\w $/ 代表單字字符，例如 A-Z、a-z、0-9 和 _。

您應該嘗試在使用者名字段中輸入不同的使用者名稱。一段時間後，您會注意到，如果在前 6 個字符之前或前 12 個字符之後鍵入字符，表單不會抱怨該字符不是字母數字。這種行為對使用者來說不太友善。

例如，假設您的某些用戶的用戶名以感嘆號開頭。他們必須等到再輸入六個字元才能收到有關僅使用字母數字字元的錯誤。如果他們從頭開始再次輸入用戶名，那將會非常令人沮喪。

預設情況下，ngMessages 一次僅向使用者顯示一個錯誤。這就是為什麼在使用者輸入超過六個字元之前無法顯示有關無效字元的訊息的原因。此外，ngMessages 使用您輸入錯誤訊息的順序作為提示來確定其優先順序。

如果您在出現字母數字錯誤之前提供了最小字元訊息，ngMessages 將等到最小字元錯誤解決後再顯示字母數字錯誤。

這是相同的表單，但錯誤訊息以不同的順序顯示。

您也可以使用 ng-messages-multiple 一次向使用者顯示所有適用的錯誤訊息。然而，一旦用戶開始在輸入欄位中輸入內容，就會看到多個錯誤訊息，這可能會讓他們不知所措。

重用错误消息

我们的标记中仍然有很多重复。如果您想为不同的输入字段显示相同的错误消息，则为每个输入字段重复它是没有意义的。 ngMessages 模块可以帮助您仅编写一次通用错误消息，并在需要时将它们包含在您的表单中。以下是创建向用户显示通用错误消息的表单的标记。

<script type="text/ng-template" id="generic-messages">
    <p ng-message="required">This field is required.</p>
    <p ng-message="minlength">This field is too short.</p>
    <p ng-message="maxlength">This field is too long.</p>
</script>

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="formValidation.username.$error">
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
      <p ng-message="maxlength">Username cannot be longer than 12 characters.</p>
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Password</label>
    <input type="text" name="userPassword" ng-model="inputPassword" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.userPassword.$error">
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Email</label>
    <input type="email" name="userEmail" ng-model="inputEmail" required>
    <div ng-messages="formValidation.userEmail.$error">
      <p ng-message="required">This field is required.</p>
      <p ng-message="email">Please enter a valid email address.</p>
    </div>
</form>

就像前面的情况一样，消息的优先级由其在模板中的位置决定。您还可以通过在各个字段中包含自定义错误消息来覆盖模板中提供的通用消息。还可以使用以下代码从单独的文件加载错误消息：

<div ng-messages="formValidation.userPassword.$error">
    <div ng-messages-include="path/to/generic-messages.html"></div>
</div>

仅在需要时显示错误

您可以通过仅在用户在填写表单时实际出错时显示错误消息，使表单更加用户友好。例如，您可以选择仅在用户实际跳过输入元素时显示必填字段错误。

这可以通过使用 ng-show 或 ng-if 指令以及 $touched 和 $dirty。对于 $touched，一旦输入失去焦点，就会显示错误消息。对于 $dirty，一旦输入无效就会显示错误消息。

<div ng-messages="form.username.$error" ng-if="form.username.$touched">

<div ng-messages="form.username.$error" ng-if="form.username.$dirty">

<div ng-messages="form.username.$error" ng-show="form.username.$touched">

<div ng-messages="form.username.$error" ng-show="form.username.$dirty">

这是显示 $touched 和 $dirty 之间区别的演示。

结论

在本教程中，您了解了使用 ngMessages 验证不同类型表单元素的输入是多么容易。您还学习了如何多次重复使用相同的错误消息以避免重复，以及如何确定不同错误消息的优先级。

您还可以同时使用 ngMessages 和 ngAnimate 来使用自定义动画来显示或隐藏错误消息。有关使用 ngAnimate 模块的教程也将很快在 Envato Tuts+ 上发布。

如果您想与其他读者分享任何提示，或者有任何问题想问，请在评论中告诉我。

以上是使用ngMessages進行AngularJS表單驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！