Как реализовать проверку формы в Angular JS?

Проверка - это способ аутентифицировать Пользователь. Он используется во всех веб-технологиях, таких как и . Но сегодня наше внимание будет уделено валидации в Angular JS в следующем порядке:

• Что такое проверка формы?
• Проверка формы в Angular JS
• Этапы проверки формы
• Код

Что такое проверка формы?

Проверка формы - это метод, с помощью которого мы можем проверить форму HTML. Давайте рассмотрим простой пример, чтобы предположить, что у пользователя есть HTML-форма, и эта HTML-форма имеет разные поля, это поле проверяется валидатором формы, когда мы хотим проверить форму, нам просто нужно проверить значение конкретного поля с выражением валидатора .

Если регулярное выражение и значение поля совпадают, мы можем сказать, что наша форма проверена. В HTML-форме есть разные типы проверок, такие как электронная почта, обязательная, минимальная, максимальная, пароль и т. Д.

Проверка формы в Angular JS

Давайте поговорим о том, как мы можем проверить форму в angular JS. Angular JS предоставляет различные типы свойств проверки формы, которые мы можем использовать для проверки формы или получения данных из формы.

кольцевая диаграмма против круговой диаграммы

• $ действительный : Это свойство сообщает, действительно ли поле, применяя к нему соответствующее правило.

• $ недействительный : Как видно из названия, недействителен этот тайл, погодное поле недействительно или не на основании соответствующего правила.

• $ первозданный : Вернет истину, если поле ввода формы не используется.

  
  
  

• $ грязный : Он вернет истину в поле ввода формы.

• $ тронут : Boolean Истинно, если ввод был размытым.

Чтобы получить доступ к форме: .

Чтобы получить доступ к входу: ..

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

как инициализировать класс в Python

Вindex.htmlформа содержания страницы сподтверждатьсобственности и что именно это означает?

Свойство novalidate в теге формы сообщает HTML, что мы можем использовать нашу настраиваемую проверку формы. Если мы не указываем свойство novalidate, тогда HTML-форма проверяется с помощью свойств проверки формы по умолчанию HTML5.

Этапы проверки формы

В нашей форме мы создали 6 полей в нашей форме, это имя, фамилия, адрес электронной почты, телефон, пароль и сообщение.

1. Сначала мы добавляем обязательный валидатор поля, этот валидатор сообщает пользователям, что требуется определенное поле.

2. Далее идет поле электронной почты, если пользователь не дает действительного адреса электронной почты, тогда наш валидатор электронной почты выдает ошибку проверки электронной почты.

3. Мы устанавливаем минимальную и максимальную длину при проверке пароля: минимальная длина равна 5, а максимальная длина - 8, поэтому пользователь может указать действительный пароль от 5 до 8 символов.

4. Наконец, мы устанавливаем телефон и поля сообщения обязательными и, в частности, применяем проверку номера в поле телефона.

Код для проверки формы в Angular JS

index.html

Пример угловой области Имя 
 
Это поле обязательно
Фамилия 
 
Это поле обязательно
Эл. адрес 
 
Это поле обязательно
 
Недействительный адрес электронной почты
Телефон 
 
Это поле обязательно
 
Это недействительный телефон
пароль 
 
Это поле обязательно
 
Пароль от 5 до 8 символов
Сообщение 
 
Это поле обязательно
преобразовать двоичный код в int java
Разместить

app.js

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

Давайте поговорим о некоторой директиве проверки, используемой в форме:

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

На этом мы подошли к концу статьи о проверке правильности в Angular JS. Надеюсь, вы получили представление о различных вещах, которые следует учитывать при проверке формы в Angular JS.

Если вы хотите узнать больше о фреймворке Angular, ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Этот тренинг поможет вам глубже понять Angular и достичь мастерства в этой теме.

Есть вопрос к нам? Пожалуйста, укажите это в комментариях к этой статье, и мы свяжемся с вами.