AngularJS menggunakan ngMessages untuk pengesahan borang_AngularJS

AngularJS dilahirkan pada tahun 2009, dicipta oleh Misko Hevery dan yang lain, dan kemudiannya diperoleh oleh Google. Ia merupakan rangka kerja JS bahagian hadapan yang sangat baik yang telah digunakan dalam banyak produk Google. AngularJS mempunyai banyak ciri, yang paling teras ialah: MVVM, modularisasi, pengikatan data dua hala automatik, tag semantik, suntikan kebergantungan, dsb.

Modul bernama "ngMessages" dipasang melalui npm install angular-messages. Sebelum menggunakan ngMessages, kami mungkin menulis pengesahan seperti ini:

<form name="userForm">
<input 
type="text" 
name="username" 
ng-model="user.username" 
ng-minlength="3" 
ng-maxlength="8"
required>
<p ng-show="userForm.username.$error.minlength">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength">Username is too long.</p>
<p ng-show="userForm.username.$error.required">Your username is required.</p>
</form>

Di atas menyenaraikan setiap kemungkinan kegagalan pengesahan dan menulis secara manual sama ada untuk memaparkan mesej ralat.

Dengan modul "ngMessages", ia boleh ditulis secara kasar seperti ini:

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>

ngMessages secara automatik menentukan ralat yang hendak dipaparkan untuk kami.

Beberapa perkara penting apabila menggunakan ngMessages:

● npm install angular-message
● Petikan: angular-messages.js
● Ketergantungan: angular.module('app',['ngMessages'])

Berikut ialah Demo ringkas, struktur fail:

modul_nod/
app.js
emailmessages.html
index.html

Pemasangan adalah seperti berikut:

npm pasang bootstrap
npm pasang sudut
npm install angular-message

==index.html

用户名

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>


邮箱







提交

{{userForm.name.$error}}
{{userForm.email.$error}}

app.js

angular.module('app',['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl(){
}

emelmessages.html

Letakkan pengesahan borang yang berkaitan dengan e-mel di sini dan paparkannya di suatu tempat di halaman melalui b1010a975dc5ebb8b976dafe68a17c7a16b28748ea4df4d9c2150843fecfba68.

<p ng-message="required">邮箱必填</p>
<p ng-message="minlength">邮箱长度太短</p>
<p ng-message="maxlength">邮箱长度太长</p>
<p ng-message="email">邮箱无效</p>

ps: Arahan pengesahan borang yang biasa digunakan

1. Pengesahan medan yang diperlukan

Sama ada input borang telah diisi, cuma tambahkan teg HTML5 yang diperlukan pada elemen medan input:

Salin kod Kod adalah seperti berikut:

ed253ebb5ddf31bf66236ab15bbcbbe7

2. Panjang minimum

Untuk mengesahkan sama ada panjang teks input borang lebih besar daripada nilai minimum tertentu, gunakan perintah ng-minleng= "{number}" pada medan input:

Salin kod Kod adalah seperti berikut:

98d5fcb979fcf1c21f11fdb6e9d615a2

3. Panjang maksimum

Untuk mengesahkan sama ada panjang teks input borang adalah kurang daripada atau sama dengan nilai maksimum tertentu, gunakan perintah ng-maxlength="{number}" pada medan input:

Salin kod Kod adalah seperti berikut:

44bcd696cf393169990dcefab9a1c0d1

4. Padanan corak

Gunakan ng-pattern="/PATTERN/" untuk memastikan bahawa input sepadan dengan ungkapan biasa yang ditentukan:

Salin kod Kod adalah seperti berikut:

44ccc91a1cd14c1ff9a3a4b62eafbda4

5. E-mel

Untuk mengesahkan sama ada kandungan input ialah e-mel, cuma tetapkan jenis input kepada e-mel seperti berikut:

Salin kod Kod adalah seperti berikut: 0fc2238b24406628fab06303f67dd720

6 Nombor

Sahkan sama ada kandungan input ialah nombor dan tetapkan jenis input kepada nombor:

Salin kod

Kod adalah seperti berikut: 1005edcba35f1e29b15d03212ac61afe

7. URL

Sahkan sama ada kandungan input ialah URL, tetapkan jenis input kepada url:

Salin kod

Kod adalah seperti berikut: b4a4f76522ddf066026eb75900ac307e