Перевірка форми AngularJS: TextBox, кнопка (Приклад)

Зміст:

Anonim

Перевірка - це процес, який забезпечує правильність та повноту даних.

У реальному прикладі припустимо, що сайт, який вимагає заповнення реєстраційної форми, повинен отримати повний доступ до цього сайту. На сторінці реєстрації будуть поля для введення імені користувача, пароля, ідентифікатора електронної пошти тощо.

Коли користувач подає форму, зазвичай спочатку відбувається перевірка, перш ніж деталі надсилаються на сервер. Ця перевірка намагатиметься забезпечити в найкращій мірі можливість правильного введення даних для полів введення.

Наприклад, ідентифікатор електронної пошти завжди повинен бути у форматі Ця адреса електронної пошти захищена від спам-ботів. Вам потрібно увімкнути JavaScript, щоб переглянути його. ; якщо хтось вводить лише ім’я користувача в ідентифікаторі електронної пошти, то в ідеалі перевірка повинна провалитися. Отже, перевірка передбачає виконання цих основних перевірок перед тим, як деталі надсилаються на сервер для подальшої обробки.

У цьому підручнику ви дізнаєтесь-

  • Перевірка форми за допомогою HTML5
  • Перевірка форми з використанням $ брудного, $ дійсного, $ недійсного, $ первозданного
  • Перевірка форми за допомогою автоматичної перевірки AngularJS
  • Відгуки користувачів за допомогою кнопок Ladda

Перевірка форми за допомогою HTML5

Перевірка форми - це процес попередньої перевірки інформації, що вводиться користувачем у веб-форму перед тим, як вона надсилається на сервер. Завжди краще перевіряти інформацію на стороні клієнта. Це пов’язано з тим, що це додає менше накладних витрат, якщо користувачеві довелося знову подавати форму, якщо введена інформація була неправильною.

Давайте подивимося, як перевірка форми може проводитися в HTML5.

У нашому прикладі ми покажемо одній простій реєстраційній формі для користувача, в якій користувач повинен ввести такі дані, як ім’я користувача, пароль, ідентифікатор електронної пошти та вік.

Форма матиме засоби перевірки, щоб гарантувати, що користувач вводить інформацію належним чином.

Event Registration

Guru99 Global Event


    Enter your user name:

   Enter your password:   

   Enter your email:        

   Enter your age:           

         

Пояснення коду:

  1. Для типу введення тексту ми використовуємо атрибут 'required'. Це означає, що під час подання форми текстове поле не може бути порожнім, а в текстовому полі повинен бути якийсь текст.
  2. Наступний тип введення - пароль. Оскільки тип введення позначений як пароль, коли користувач вводить будь-який текст у поле, він буде маскуватися.
  3. Оскільки тип введення вказаний як електронна пошта, текст у полі повинен відповідати шаблону. Ця електронна адреса захищена від спам-ботів. Вам потрібно увімкнути JavaScript, щоб переглянути його. .
  4. Коли тип введення позначений як число, якщо користувач намагається ввести будь-який символ за допомогою клавіатури або алфавіту, він не буде введений у текстове поле.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

Щоб побачити перевірку форми в дії, натисніть кнопку «Надіслати», не вводячи жодної інформації на екран.

Після натискання кнопки «Відправити» з’явиться спливаюче вікно, що відображає помилку перевірки, що поле потрібно заповнити.

Тож перевірка для елемента керування, який був позначений як необхідний, призводить до появи повідомлення про помилку, якщо користувач не вводить жодного значення в текстове поле.

Коли користувач вводить будь-яке значення в систему управління паролем, ви помітите символ '*', який використовується для маскування введених символів.

Давайте введемо неправильний ідентифікатор електронної пошти та натисніть кнопку надіслати. Після натискання кнопки подати з’явиться спливаюче вікно, що відображає помилку перевірки, що в полі має бути символ @.

Тож перевірка для елемента керування, який був позначений як елемент керування електронною поштою, призведе до того, що повідомлення про помилку відображатиметься, якщо користувач не введе належний ідентифікатор електронної пошти в текстовому полі.

Нарешті, при спробі ввести будь-які символи в елемент керування віковим текстом, він не буде введений на екран. Елемент керування заповнюватиме значення лише тоді, коли в елемент керування буде введено число.

Перевірка форми з використанням $ брудного, $ дійсного, $ недійсного, $ первозданного

AngularJS надає свої додаткові властивості для перевірки. AngularJS надає такі властивості для елементів керування для цілей перевірки

  • $ брудний - користувач взаємодіяв з елементом управління
  • $ valid - вміст поля дійсний
  • $ invalid - вміст поля недійсний
  • $ pristine - Користувач ще не взаємодіяв з елементом управління

Нижче наведені кроки, яких потрібно дотримуватися для проведення кутової перевірки.

Крок 1) Використовуйте властивість no validate під час оголошення форми. Ця властивість повідомляє HTML5, що перевірку буде здійснювати AngularJS.

Крок 2) Переконайтеся, що форма має для неї визначене ім’я. Причиною цього є те, що під час проведення перевірки Angular буде використано назву форми.

Крок 3) Переконайтеся, що кожен елемент керування також має для нього визначене ім’я. Причиною цього є те, що під час проведення кутової перевірки буде використано ім'я контролю.

Крок 4) Використовуйте директиву ng-show для перевірки властивостей $ брудних, $ недійсних та $ дійсних для елементів керування.

Давайте розглянемо приклад, який включає вищезазначені кроки.

У нашому прикладі

Ми просто отримаємо просте текстове поле, в яке користувачеві потрібно ввести ім’я теми у текстовому полі. Якщо цього не зробити, буде викликано помилку перевірки, і повідомлення про помилку буде показано користувачеві.

Event Registration

Guru99 Global Event




Topic Name:
Username is required

Пояснення коду:

  1. Зверніть увагу, що ми дали назву Формі, яка є "myForm". Це потрібно при доступі до елементів керування у формі для перевірки AngularJS.
  2. Використання властивості "novalidate" для забезпечення того, що форма HTML дозволяє AngularJS здійснювати перевірку.
  3. Ми використовуємо директиву ng-show для перевірки властивостей "$ брудний" та "$ недійсний". Це означає, що якщо текстове поле було змінено, значення властивості "$ dirty" буде істинним. Крім того, у випадку, коли значення текстового поля дорівнює нулю, властивість "$ invalid" стане істинною. Отже, якщо обидві властивості істинні, тоді перевірка не вдасться для елемента керування. Отже, якщо обидва значення істинні, ng-show також стане істинним, і відобразиться контроль діапазону з червоними кольоровими символами.
  4. У цьому ми перевіряємо властивість "$ error", яке також оцінює як істинне, оскільки ми згадали для елемента керування, що значення має вводитися для елемента керування. У такому випадку, коли в текстове поле не вводяться дані, елемент керування діапазоном відображатиме текст "Ім'я користувача потрібно".
  5. Якщо значення керування текстовим полем недійсне, ми також хочемо відключити кнопку надсилання, щоб користувач не міг подати форму. Ми використовуємо властивість "ng-disabled" для елемента керування, щоб зробити це на основі умовного значення властивості "$ dirty" та "$ invalid" елемента керування.
  6. У контролері ми просто встановлюємо початкове значення значення текстового поля для тексту "AngularJS". Це просто робиться, щоб встановити якесь значення за замовчуванням для текстового поля при першому відображенні форми. Це краще демонструє, як відбувається перевірка для поля текстового поля.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

Коли форма спочатку відображається, у текстовому полі відображається значення "AngularJS" і ввімкнено "кнопку подати". Як тільки ви видалите текст із елемента керування, повідомлення про помилку перевірки вмикається, а кнопка Надіслати вимикається.

Наведений вище скріншот відображає дві речі

  • Кнопка "Надіслати" вимкнена
  • У текстовому полі теми немає назви теми. Отже, запускається повідомлення про помилку "Потрібне ім’я користувача".

Перевірка форми за допомогою автоматичної перевірки AngularJS

У AngularJS є можливість автоматично перевірити всі елементи керування форми без необхідності писати власний код для перевірки. Це можна зробити, включивши спеціальний модуль під назвою "jcs-AutoValidate".

З цим модулем на місці, вам не потрібно розміщувати будь-який спеціальний код для проведення перевірки або показу повідомлень про помилки. Все це обробляється кодом всередині JCS-AutoValidate.

Давайте розглянемо простий приклад того, як цього досягти.

У цьому прикладі

Ми просто отримаємо просту форму з елементом управління текстовим полем, який є обов’язковим полем. Якщо цей елемент керування не заповнений, повинно відображатися повідомлення про помилку.

Event Registration

Guru99 Event




Topic Name:

Пояснення коду:

  1. По-перше, нам потрібно включити сценарій "jcs-auto-validate.js", який має всі функції автоматичної перевірки.
  2. Потрібно переконатися, що кожен елемент, що включає тег div, розміщується у класі "group-group".
  3. Також потрібно переконатись, що кожен елемент (який є елементом HTML, таким як вхід, контроль діапазону, керування div тощо), такий як елементи введення, також розміщується у класі групи форм.
  4. Включіть jcs-autovalidate у ваш модуль AngularJS JS.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

За замовчуванням під час запуску коду вищевказана форма відображатиметься відповідно до коду HTML.

Якщо ви спробуєте надіслати форму, з’явиться повідомлення про помилку із запитом: «Це поле обов’язкове». Все це робиться за допомогою опції JCS-AutoValidate.

Відгуки користувачів за допомогою кнопок Ladda

Кнопки "ladda" - це спеціальний каркас, побудований для кнопок поверх JavaScript, щоб надати візуальний ефект кнопкам при їх натисканні.

Отже, якщо кнопці надано атрибут "ladda" і натиснуто, буде показано ефект віджимання. Крім того, для кнопки доступні різні стилі даних для забезпечення додаткових візуальних ефектів.

Давайте розглянемо приклад того, як бачити кнопки "ladda" в дії. Ми просто побачимо просту форму, яка має кнопку подати. При натисканні кнопки на кнопці відображатиметься ефект віджимання.

Event Registration

Guru99 Event

Пояснення коду:

  1. Ми використовуємо директиву "ng-submit" для виклику функції під назвою "submit". Ця функція буде використана для зміни атрибута ladda кнопки подання.
  2. Атрибут ladda - це особливий атрибут рамки ladda. Саме цей атрибут додає ефект обертання до контролю. Ми встановлюємо значення атрибута ladda для змінної, що подає.
  3. Властивість стилю даних знову є додатковим атрибутом, запропонованим фреймворком ladda, який просто додає інший візуальний ефект до кнопки подання.
  4. Модуль 'AngularJS-ladda' повинен бути доданий до програми AngularJS.JS, щоб платформа ladda працювала.
  5. Спочатку ми визначаємо та встановлюємо значення змінної, яка називається 'submitting', значення false. Це значення встановлено для атрибута ladda кнопки подання. Спочатку встановивши для цього значення false, ми говоримо, що ми не хочемо, щоб кнопка "Надіслати" ще мала ефект ladda.
  6. Ми оголошуємо функцію, яка викликається при натисканні кнопки подати. У цій функції ми встановлюємо для параметра «подання» значення «істина». Це призведе до застосування ефекту ladda до кнопки подання.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

Коли форма спочатку відображається, кнопка надсилання відображається у простому вигляді.

При натисканні кнопки подання змінна подання в контролері встановлюється в значення true. Це значення передається атрибуту "ladda" кнопки подання, що викликає ефект обертання кнопки.

Резюме

  • Перевірку елементів керування HTML текстового поля можна здійснити за допомогою атрибута 'required'.
  • У HTML5 додано нові елементи керування, такі як пароль, електронна пошта та номер, які забезпечують власний набір перевірок.
  • Перевірка форми в AngularJS виконується шляхом перегляду значень $ брудного, $ дійсного, $ недійсного та $ первозданних елементів управління форми.
  • Автоматична перевірка в додатках AngularJS також може бути досягнута за допомогою модуля автоматичної перевірки JCS.
  • Кнопки Ladda можна додавати до програми Angular.js, щоб надати трохи покращеного візуального відчуття користувачеві при натисканні кнопки.