Phenquestions
Перевірка форми - це основна і найважливіша частина процесу веб-розробки. Зазвичай перевірка форми здійснюється на стороні сервера. Перевірка форми допомагає показувати користувачеві повідомлення про помилки, якщо надаються непотрібні або неправильні дані або необхідне поле залишається порожнім. Якщо сервер виявляє помилку, він видаляє цю помилку; тоді ми показуємо користувачеві повідомлення про помилку. Але ми можемо використовувати javascript в інтерфейсі, щоб перевірити дані форми та негайно показати помилки. У цій статті ми дізнаємося про основну перевірку форми в javascript. Отже, давайте перейдемо безпосередньо до прикладів і побачимо, як ми можемо це зробити в javascript.
Приклади
Перш за все, ми приймаємо форму з назвою "testForm", в якій ми маємо поле введення з міткою "Ім'я користувача", а тип введення подається в нашому файлі HTML. У тезі форми ми створили подію onsubmit, в якій робимо закриття та повертаємо функцію validateFunc ().
У файлі сценарію ми напишемо визначення функції validateFunc (), яке буде виконуватися кожного разу, коли користувач натискає кнопку "Відправити". У цій функції ми перевіримо поле введення імені користувача. Припускаємо, що ми хочемо перевірити, чи поле ім’я користувача порожнє, чи ні, коли користувач натискає кнопку подати.
Отже, для перевірки поля імені користувача. Спочатку ми призначаємо змінну документу.testForm, просто для того, щоб надати чіткий і зрозумілий вигляд коду. Потім, у визначенні функції, ми напишемо код для перевірки. Ми напишемо оператор if, щоб перевірити порожнє поле форми. Якщо поле імені користувача порожнє, ми покажемо вікно попередження про помилку, знову зосередимося на полі імені користувача і повернемо false, щоб форма не надсилалася. В іншому випадку, якщо він пройде перевірку і дані перевіряться, ми повернемо функцію true.
var theForm = документ.testForm;// Код перевірки форми
функція validationFunc ()
якщо (theForm.ім'я.значення == "")
попередження ("ім'я порожнє");
форма.ім'я.фокус ();
повернути false;
повернення (істина);
Після написання всього цього коду. Якщо ми запускаємо код і натискаємо кнопку «Відправити», не вписуючи нічого у поле форми.
Як ви можете помітити на скріншоті, що додається нижче, він видає помилку у вікні попередження.
Це дуже базовий, але непоганий приклад, щоб розпочати впровадження перевірки форми. Для подальшого впровадження, наприклад, для перевірки кількох форм, або ви також хочете перевірити довжину символів.
Для цього спочатку ми припускаємо два поля форми в тезі форми з позначкою «електронна пошта» та «пароль» у нашому файлі HTML.
Для перевірки в javascript ми знову помістимо оператор if для перевірки полів форми електронної пошти та пароля у визначенні функції файлу сценарію. Припустимо, ми хочемо застосувати кілька перевірок до поля електронної пошти, як-от поле не повинно бути порожнім і його довжина не повинна бути менше 10 символів. Отже, ми можемо використовувати АБО «||» у твердженні if. У разі виникнення будь-якої з цих помилок на екрані з'явиться вікно попередження із повідомленням про помилку, яке ми хочемо показати, зосередитись на полі форми електронної пошти та повернути функції функцію false. Подібним чином, якщо ми хочемо застосувати перевірку довжини символів у полі пароля, ми можемо це зробити.
var theForm = документ.testForm;// Код перевірки форми
функція validationFunc ()
якщо (theForm.ім'я.значення == "")
попередження ("ім'я порожнє");
форма.ім'я.фокус ();
повернути false;
якщо (theForm.електронною поштою.значення == "" || форма.електронною поштою.значення.довжина < 10)
попередження ("Електронна пошта невідповідна");
форма.електронною поштою.фокус ();
повернути false;
якщо (theForm.пароль.значення.довжина < 6)
попередження ("Пароль повинен містити 6 символів");
форма.пароль.фокус ();
повернути false;
повернення (істина);
Написавши весь цей код, перезавантажте сторінку, щоб оновити код. Тепер ми залишаємо порожнє поле електронної пошти або пишемо електронне повідомлення менше 10 символів. В обох випадках відображатиметься помилка "Електронна пошта неприйнятна".
Отже, ось як ми можемо застосувати базову перевірку форми в JavaScript. Ми також можемо застосувати перевірку даних на стороні клієнта за допомогою Regex або написавши власну спеціальну функцію. Припустимо, ми хочемо застосувати перевірку даних у полі електронної пошти. Регулярний вираз буде таким для перевірки електронної пошти.
якщо (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [захищено електронною поштою] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.тест (форма.електронною поштою.значення))
попередження ("Електронна пошта невідповідна");
форма.електронною поштою.фокус ();
повернути false;
Це була лише базова демонстрація перевірки даних за допомогою регулярного виразу. Але небо відкрите для вас для польоту.
Висновок
Ця стаття висвітлює основні перевірки форми в javascript. Ми також спробували проникнути у перевірку даних за допомогою регулярного виразу. Якщо ви хочете дізнатись більше про регулярний вираз, у нас є спеціальна стаття, пов’язана із регулярним виразом на linuxhint.ком. Для вивчення та розуміння концепцій JavaScript та більш корисного вмісту, подібного до цього, продовжуйте відвідувати linuxhint.ком. Дякую!
