Как да приложим проверка на формуляра в Angular JS?

Проверката е метод за удостоверяване потребителя. Използва се във всички уеб технологии като и . Но днес фокусът ни ще бъде върху валидирането в Angular JS в следния ред:

• Какво е проверка на формата?
• Проверка на формуляра в Angular JS
• Стъпки при проверка на формуляра
• Код

Какво е проверка на формуляра?

Проверката на формуляра е техника, чрез която можем да проверим HTML формата. Нека вземем прост пример, за да предположим, че потребителят има HTML форма и че HTML формулярът има различни полета, тези полета се валидират от валидатора на формуляри, когато искаме да проверим формата, просто трябва да проверим стойността на конкретното поле с израза на валидатора .

Ако регулярният израз и стойността на полето са еднакви, тогава можем да кажем, че нашата форма е валидирана. Във HTML формата има различни видове проверки като имейл, задължително, мин, макс, парола и т.н.

Проверка на формуляра в Angular JS

Нека поговорим за това как можем да потвърдим форма в ъглова JS. Angular JS предоставя различни видове свойства за проверка на формуляри, които можем да използваме, за да проверим формата или да получим данните от нея.

• $ валиден : Това свойство казва дали полето е валидно или не, като прилага съответното правило за това.

• $ невалиден : Тъй като името казва невалидна тази плочка времето полето е невалидно или не се основава на подходящо правило за това.

• $ девствена : Ще върне true в полето за въвеждане на формуляра не се използва.

  
  
  

• $ мръсни : Ще се върне true в полето за въвеждане на формуляра.

• $ докоснат : BooleanTrue, ако въведеното е замъглено.

За достъп до формуляра: .

За достъп до вход: ..

Сега нека да обясним валидирането на формуляра в ъглова JS с пример, така че първо правим два файла, единият е app.js и друг е index.html. Нашият файл index.htm съдържа прост HTML формуляр, който има ъглова проверка, а нашият app.js файл съдържа бекенд кода за обработка на проверката на формуляра на страницата index.html.

Theindex.htmlформа на съдържанието на страницата сневалиденсобственост и какво точно означава това?

Свойството novalidate в маркера на формуляра казва на HTML, че можем да използваме нашата проверка на формуляр по избор. Ако не дадем свойството novalidate, тогава и HTML формулярът се проверява чрез използване на свойствата за проверка на HTML5 по подразбиране.

Стъпки при проверка на формуляра

Във нашата форма създадохме 6 полета във нашата форма, това са собствено име, фамилия, имейл, телефон, парола и съобщение.

1. Първо, добавяме необходимия валидатор на полета, този валидатор казва на потребителите, че е необходимо специфично поле.

2. Следващото е имейл полето, ако потребителят не даде валиден имейл, тогава нашият валидатор на имейл извежда грешка при проверка на имейл.

3. Ние определяме минималната и максималната дължина при валидирането на нашата парола, минималната дължина е 5, а максималната дължина е 8, така че потребителят може да даде валидна парола между 5 и 8 знака.

4. И накрая, ние задаваме задължителните полета за телефон и съобщения и по-конкретно прилагаме валидиране на номера на подаденото в телефона.

Код за валидиране на формуляр в Angular JS

index.html

Пример за ъглов обхват Име 
 
Това заявление е задължително
Фамилия 
 
Това заявление е задължително
електронна поща 
 
Това заявление е задължително
 
Не е валиден имейл
Телефон 
 
Това заявление е задължително
 
Това не е валиден телефон
Парола 
 
Това заявление е задължително
как да използвам css спрайтове -
 
Парола между 5 и 8 знака
Съобщение 
 
Това заявление е задължително
Изпращане

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', функция ($ scope) {})

Нека поговорим за някои директиви за проверка, използвани във формата:

• ng-задължително : За предоставяне на задължителното поле
• ng-шоу : За показване на съобщението за грешка въз основа на условието (проверете свойствата за проверка)
• на минимална дължина : За осигуряване на минимална дължина
• ng-maxlength : За осигуряване на максимална дължина
• на образец : За да съответства на определен модел
• ng-модел : Свързва полето със свойства за проверка като $ error, $ valid и т.н.

С това стигнахме до края на тази статия за проверка в Angular JS. Надявам се, че сте разбрали различните неща, които трябва да бъдат взети под внимание за проверка на формата в Angular JS.

Ако искате да научите повече за Angular framework, тогава разгледайте нашата което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ще ви помогне да разберете по-задълбочено Angular и ще ви помогне да постигнете майсторство по темата.

Имате въпрос към нас? Моля, споменете го в раздела за коментари на тази статия и ние ще се свържем с вас.