Как да внедрите валидиране на формуляри от страна на клиента с JavaScript

Как да внедрите валидиране на формуляри от страна на клиента с JavaScript

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





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



Разбиране на DOM манипулирането

Преди да пристъпим към внедряване на валидиране на клиентска форма с JavaScript, от съществено значение е да разберем обектния модел на документа, известен като „DOM“. DOM е стандартизиран API, който позволява JavaScript да взаимодейства с елементи на HTML уеб страница.





Научете повече: Скритият герой на уебсайтовете: Разбиране на DOM

За да добавите слушатели на събития и да извлечете потребителски данни, ще трябва да разберете основите на манипулирането на DOM. Ето пример, който обяснява как можете да промените съдържанието на уеб страницата с помощта на DOM API и JavaScript:









Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';

В горния код,

маркерът има идентификатор на параграф . Докато пишете JavaScript кода, можете да получите достъп до този елемент, като извикате document.getElementById ('параграф') метод и манипулиране на неговата стойност.

Сега, след като сте разбрали основите на манипулирането с DOM, нека да продължим и да приложим валидирането на формуляра.



Проверка на формуляра с JavaScript

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

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



itunes променя местоположението за архивиране windows 10

HTML element се използва за създаване на тези формуляри, насочени към потребителя. Ето как можете да потвърдите входовете на HTML формуляр:

1. Проверка на имейл

Независимо дали изграждате система за удостоверяване или просто събирате имейли на потребители за вашия бюлетин, важно е да потвърдите имейла, преди да можете да го съхранявате във вашата база данни или да го обработвате. За да проверите дали имейл отговаря на всички необходими условия, можете да използвате a редовен израз .

HTML:

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. Проверка на паролата

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

  • Паролата трябва да е с повече от 6 знака.
  • Стойността на паролата и полето за потвърждение на паролата трябва да са еднакви.

HTML:


JavaScript:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. Проверка на радиовхода

HTML радиовходът е специален тип графичен контролен елемент, който позволява на потребителя да избере само една от предварително дефинирания набор от взаимно изключващи се опции. Чест случай на използване на такъв вход би бил за избор на пол. За да потвърдите такъв вход, ще трябва да проверите дали е избран поне един от тях.

Това може да се постигне с помощта на логически оператори като AND ( && ) и не ( ! ) оператор по този начин:

HTML:

Male

Female

Others

JavaScript:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. Изберете Input Validation

The HTML елемент се използва за създаване на падащ списък. The тагове вътре в елемент определят наличните опции в падащия списък. Всеки от тези таговете имат свързан атрибут на стойност.

хардуерно ускорение хром включен или изключен

За опцията по подразбиране или първоначалната, можете да зададете стойността й като празен низ, така че да се счита за невалидна опция. За всички останали опции задайте подходящ атрибут на стойност. Ето пример за това как можете да потвърдите a входен елемент:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

намерих iphone как да го отключа
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Валидиране на квадратчетата за отметка

Елементите за въвеждане на полето за тип се изобразяват по подразбиране като полета, които се поставят или се поставят отметки, когато са активирани. Полето за отметка ви позволява да изберете единични стойности за изпращане във формуляр. Полетата за отметка са популярен избор за въвеждане „приемане на условия“.

За да разберете дали квадратчето за отметка е поставено или не, можете да получите достъп до отметен атрибут на въведеното поле за отметка. Ето един пример:

HTML:


I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}

Превенцията е по -добра от лечението

Винаги се препоръчва да потвърдите всички данни, които получавате от посетител, за да осигурите безопасно и сигурно изживяване. Хакерите винаги се опитват да въведат злонамерени данни в полетата за въвеждане, за да изпълняват скриптови атаки между сайтове и SQL инжекции.

Сега, когато разбирате как да валидирате вашите HTML входове, защо не опитате, като изградите формуляр и приложите стратегиите, които сте видели по -горе?

Дял Дял Туит електронна поща Как да създадете формуляр в HTML

Позволете на вашите потребители да въвеждат данни на вашите уебсайтове с HTML формуляри.

Прочетете Напред Свързани теми
  • Програмиране
  • HTML
  • JavaScript
  • Уеб разработка
  • Уроци по кодиране
За автора Нитин Ранганат(31 статии са публикувани)

Нитин е запален разработчик на софтуер и студент по компютърно инженерство, разработващ уеб приложения, използващи JavaScript технологии. Той работи като уеб разработчик на свободна практика и обича да пише за Linux и програмиране в свободното си време.

Още от Nitin Ranganath

Абонирайте се за нашия бюлетин

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

Щракнете тук, за да се абонирате