Pengesahan borang AngularJS menggunakan ngMessages

Hampir setiap tapak web menggunakan borang untuk melaksanakan tugas yang berbeza, seperti mendaftarkan pengguna atau mendapatkan maklumat hubungan mereka. Adalah penting untuk memastikan bahawa pengguna yang mengisi borang sekurang-kurangnya memasukkan maklumat yang sah ke dalam medan input.

Mesej ralat terperinci juga perlu ditunjukkan kepada pengguna supaya mereka boleh mengisi borang dengan betul. Proses ini boleh menjadi sangat rumit apabila anda perlu berurusan dengan sejumlah besar elemen bentuk, setiap satunya memerlukan mesej ralat tersuai sendiri. Untuk mengurangkan kesakitan, Angular 1.3 menambah modul baharu yang dipanggil ngMessages untuk membantu pembangun mengesahkan borang dengan mudah.

Modul

ngMessages membolehkan anda memaparkan mesej ralat tersuai kepada pengguna tanpa menulis kod pendua. Dalam tutorial ini, anda akan belajar cara menggunakan modul ini untuk mengesahkan borang anda. Anda juga akan belajar cara memuatkan mesej ralat secara luaran dan hanya memaparkan mesej apabila benar-benar diperlukan.

Contoh asas

Mari kita sahkan dahulu satu medan input dengan atau tanpa bantuan ngMessages untuk memahami kegunaan modul ini. Tanpa menggunakan ngMessages, penanda elemen input akan kelihatan seperti kod berikut:

<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>

Anda juga memerlukan kod JavaScript berikut:

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

Semua elemen borang lain memerlukan pengesahan yang serupa. Ini akan menjadikan markup sangat berulang, meningkatkan kemungkinan ralat. Jika anda memutuskan untuk menggunakan ngMessages untuk mengesahkan input borang yang sama, penanda akan kelihatan seperti kod berikut:

<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>

Kod JavaScript kini akan menjadi:

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

Di sini, kami menggunakan arahan ng-messages untuk mengumpulkan mesej ralat bersama-sama. Nilai yang dihantar kepada arahan ng-messages mengikuti corak formName.inputName.$error berikut. Dalam contoh kami, ini menilai kepada formValidation.username.$error. 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

Begitu juga, anda juga boleh mendapatkan nilai arahan ng-messages untuk semua medan lain. ngMessages bergantung pada objek $error yang didedahkan oleh arahan ngModel untuk menentukan sama ada mesej ralat harus ditunjukkan atau disembunyikan pada halaman web. Ia menggelung melalui objek $error, mencari kunci yang sepadan dengan nilai mana-mana arahan ng-message. 🎜 🎜Berikut ialah contoh yang berfungsi menunjukkan kod pengesahan di atas dalam tindakan: 🎜 🎜🎜 🎜Borang pengesahan🎜 🎜Dalam bahagian ini kami akan mengesahkan borang yang mengandungi nama pengguna, kata laluan dan medan e-mel. Penanda borang akan kelihatan seperti kod berikut: 🎜

<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>

🎜Seperti yang anda lihat, penanda yang diperlukan untuk mengesahkan elemen bentuk yang berbeza adalah sangat serupa. Perubahan penting dalam contoh ini ialah penambahan arahan ng-pattern. Corak yang kami gunakan di sini memastikan bahawa nama pengguna yang dimasukkan hanya mengandungi aksara alfanumerik dan garis bawah. w dalam /^w+$/ mewakili aksara perkataan seperti A-Z, a-z, 0-9 dan _. 🎜 🎜🎜 🎜Anda harus cuba memasukkan nama pengguna yang berbeza dalam medan nama pengguna. Selepas beberapa ketika, anda akan dapati bahawa jika anda menaip aksara sebelum 6 aksara pertama atau selepas 12 aksara pertama, borang itu tidak mengadu bahawa aksara itu bukan abjad angka. Tingkah laku ini tidak begitu mesra pengguna. 🎜 🎜Sebagai contoh, katakan sesetengah pengguna anda mempunyai nama pengguna yang bermula dengan tanda seru. Mereka perlu menunggu sehingga mereka memasukkan enam aksara lagi sebelum mereka mendapat ralat tentang menggunakan aksara alfanumerik sahaja. Ia akan menjadi sangat mengecewakan jika mereka mula menaip nama pengguna mereka semula dari awal. 🎜 🎜Secara lalai, ngMessages hanya memaparkan satu ralat kepada pengguna pada satu masa. Inilah sebabnya mengapa mesej tentang aksara tidak sah tidak boleh dipaparkan sehingga pengguna memasukkan lebih daripada enam aksara. Selain itu, ngMessages menggunakan susunan anda memasukkan mesej ralat sebagai petunjuk untuk mengutamakannya. 🎜 🎜Jika anda memberikan mesej aksara minimum sebelum ralat alfanumerik berlaku, ngMessages akan menunggu sehingga ralat aksara minimum diselesaikan sebelum memaparkan ralat alfanumerik. 🎜 🎜Ini adalah bentuk yang sama tetapi mesej ralat dipaparkan dalam susunan yang berbeza. 🎜 🎜🎜 🎜Anda juga boleh menggunakan ng-messages-multiple untuk memaparkan semua mesej ralat yang berkenaan kepada pengguna sekaligus. Walau bagaimanapun, apabila pengguna mula menaip dalam medan input, mereka melihat berbilang mesej ralat, yang boleh menjadi sangat menggembirakan. 🎜

重用错误消息

我们的标记中仍然有很多重复。如果您想为不同的输入字段显示相同的错误消息，则为每个输入字段重复它是没有意义的。 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+ 上发布。

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

Atas ialah kandungan terperinci Pengesahan borang AngularJS menggunakan ngMessages. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!