AngularJS menggunakan ngMessages untuk pengesahan borang_AngularJS

WBOY
Lepaskan: 2016-05-16 15:23:19
asal
1200 orang telah melayarinya

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>

Salin selepas log masuk

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>
Salin selepas log masuk

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}}
Salin selepas log masuk

app.js

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

emelmessages.html

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

.

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

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:


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:


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:



4. Padanan corak

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



5. E-mel

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



6 Nombor

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

Salin kod


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

Salin kod

Kod adalah seperti berikut:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!