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
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
.<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:
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:
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:
Gunakan ng-pattern="/PATTERN/" untuk memastikan bahawa input sepadan dengan ungkapan biasa yang ditentukan:
Untuk mengesahkan sama ada kandungan input ialah e-mel, cuma tetapkan jenis input kepada e-mel seperti berikut:
Sahkan sama ada kandungan input ialah nombor dan tetapkan jenis input kepada nombor:
Salin kod
Salin kod