AngularJS validatsiya
AngularJS kiritilgan ma’lumotlarni tekshira (validatsiya qila) oladi.
Formani tekshirish (validatsiya)
AngularJS mijoz tomonida (client-side) forma validatsiyasini taklif etadi.
AngularJS forma va kiritish maydonlarining (input, textarea, select) holatini kuzatib boradi va foydalanuvchini joriy holat haqida xabardor qilish imkonini beradi.
AngularJS, shuningdek, ularga tegilgan (touched) yoki ular o‘zgartirilgan yoki yo‘qligi haqidagi ma’lumotni ham saqlaydi.
Kiritilgan ma’lumotlarni tekshirish uchun standart HTML5 atributlaridan foydalanishingiz yoki o‘z validatsiya funksiyalaringizni yaratishingiz mumkin.
Mijoz tomonidagi validatsiyaning o‘zi foydalanuvchi kiritgan ma’lumotlarni himoyalay olmaydi. Server tomonidagi validatsiya ham zarur.
Majburiy (required)
Kiritish maydoni to‘ldirilishi shart ekanini belgilash uchun HTML5’ning required atributidan foydalaning:
Misol
Kiritish maydoni majburiy:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
O‘zingiz sinab ko‘ring »
Qiymat e-mail bo‘lishi kerakligini belgilash uchun HTML5’ning email tipidan foydalaning:
Misol
Kiritish maydoni e-mail bo‘lishi kerak:
<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
O‘zingiz sinab ko‘ring »
Forma holati va kiritish maydoni holati
AngularJS forma va kiritish maydonlarining holatini doimiy ravishda yangilab boradi.
Kiritish maydonlari quyidagi holatlarga ega:
$untouchedMaydonga hali tegilmagan$touchedMaydonga tegilgan$pristineMaydon hali o‘zgartirilmagan$dirtyMaydon o‘zgartirilgan$invalidMaydon mazmuni yaroqsiz$validMaydon mazmuni yaroqli
Ularning barchasi kiritish maydonining xususiyatlari bo‘lib, qiymati true yoki false bo‘ladi.
Formalar quyidagi holatlarga ega:
$pristineHali hech bir maydon o‘zgartirilmagan$dirtyBir yoki bir nechta maydon o‘zgartirilgan$invalidForma mazmuni yaroqsiz$validForma mazmuni yaroqli$submittedForma yuborilgan
Ularning barchasi formaning xususiyatlari bo‘lib, qiymati true yoki false bo‘ladi.
Bu holatlardan foydalanuvchiga mazmunli xabarlar ko‘rsatish uchun foydalanishingiz mumkin. Masalan, agar maydon majburiy bo‘lsa va foydalanuvchi uni bo‘sh qoldirsa, foydalanuvchiga ogohlantirish berishingiz kerak:
Misol
Agar maydonga tegilgan VA u bo‘sh bo‘lsa, xato xabarini ko‘rsating:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
O‘zingiz sinab ko‘ring »
CSS klasslari
AngularJS formalar va kiritish maydonlariga ularning holatiga qarab CSS klasslarini qo‘shadi.
Kiritish maydonlariga quyidagi klasslar qo‘shiladi yoki ulardan olib tashlanadi:
ng-untouchedMaydonga hali tegilmaganng-touchedMaydonga tegilganng-pristineMaydon hali o‘zgartirilmaganng-dirtyMaydon o‘zgartirilganng-validMaydon mazmuni yaroqling-invalidMaydon mazmuni yaroqsizng-valid-keyHar bir validatsiya uchun bitta kalit. Masalan:ng-valid-required, bir nechta narsani tekshirish kerak bo‘lganda foydaling-invalid-keyMasalan:ng-invalid-required
Formalarga quyidagi klasslar qo‘shiladi yoki ulardan olib tashlanadi:
ng-pristineHali hech bir maydon o‘zgartirilmaganng-dirtyBir yoki bir nechta maydon o‘zgartirilganng-validForma mazmuni yaroqling-invalidForma mazmuni yaroqsizng-valid-keyHar bir validatsiya uchun bitta kalit. Masalan:ng-valid-required, bir nechta narsani tekshirish kerak bo‘lganda foydaling-invalid-keyMasalan:ng-invalid-required
Klasslar ular ifodalagan qiymat false bo‘lsa, olib tashlanadi.
Ilovangizga yaxshiroq va intuitiv tushunarli foydalanuvchi interfeysini berish uchun ushbu klasslarga uslublar qo‘shing.
Misol
Standart CSS yordamida uslublarni qo‘llang:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
O‘zingiz sinab ko‘ring »
Formalarga ham uslub berish mumkin:
Misol
O‘zgartirilmagan (pristine) formalar va o‘zgartirilgan formalar uchun uslublarni qo‘llang:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
O‘zingiz sinab ko‘ring »
Maxsus validatsiya
O‘z validatsiya funksiyangizni yaratish biroz murakkabroq: ilovangizga yangi direktiva qo‘shishingiz va validatsiyani ma’lum belgilangan argumentlarga ega funksiya ichida bajarishingiz kerak.
Misol
Maxsus validatsiya funksiyasini o‘z ichiga olgan o‘z direktivangizni yarating va unga my-directive orqali murojaat qiling.
Maydon faqat qiymatida "e" belgisi bo‘lsagina yaroqli bo‘ladi:
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
function myValidation(value) {
if (value.indexOf("e") > -1) {
mCtrl.$setValidity('charE', true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
O‘zingiz sinab ko‘ring »
Misol izohi:
HTML’da yangi direktivaga
my-directive atributi orqali murojaat qilinadi.
JavaScript’da myDirective nomli yangi direktiva qo‘shishdan boshlaymiz.
Esda tuting, direktivaga nom berayotganda camelCase nomdan foydalanishingiz kerak,
myDirective, ammo uni chaqirayotganda - bilan ajratilgan nomdan foydalanishingiz kerak, my-directive.
So‘ngra ngModelController bo‘lgan ngModel talab qilinishini belgilaydigan obyektni qaytaring.
Bir nechta argument qabul qiladigan bog‘lovchi (linking) funksiya yarating, bunda to‘rtinchi argument mCtrl — ngModelController,
So‘ngra funksiya belgilang, bu holda uning nomi myValidation bo‘lib, u bitta argument qabul qiladi — bu argument input elementining qiymati.
Qiymatda "e" harfi borligini tekshiring va model kontrollerining yaroqliligini true yoki false qilib belgilang.
Nihoyat, mCtrl.$parsers.push(myValidation);
myValidation funksiyasini boshqa funksiyalar massiviga qo‘shadi, ular kiritilgan qiymat har safar o‘zgarganda bajariladi.
Validatsiya misoli
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>
O‘zingiz sinab ko‘ring »
HTML formasining novalidate atributi brauzerning standart validatsiyasini o‘chirish uchun ishlatiladi.
Misol izohi
AngularJS’ning ng-model direktivasi input elementlarini modelga bog‘laydi.
Model obyekti ikkita xususiyatga ega: user va email.
ng-show tufayli color:red uslubli span’lar faqat user yoki email $dirty va $invalid bo‘lgandagina ko‘rsatiladi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!