Home-theater-designers
JavaScript to jeden z najpopularniejszych i najbardziej wszechstronnych języków programowania, z którym możesz zacząć już dziś. Ten język programowania jest słusznie uważany za język sieci i jest niezbędny do dodania interaktywności do twoich stron internetowych.
Element formularza jest jednym z najczęściej używanych elementów HTML na stronach internetowych. Formularze te pobierają dane od użytkownika i przetwarzają je w przeglądarce lub na serwerze. Jednak ważne jest, aby zweryfikować te dane wejściowe, aby rozwiązać problemy z bezpieczeństwem i niechciane błędy.
Zrozumienie manipulacji DOM
Zanim przystąpimy do implementacji walidacji formularzy po stronie klienta za pomocą JavaScript, konieczne jest zrozumienie modelu obiektowego dokumentu, powszechnie znanego jako „DOM”. DOM to ustandaryzowany interfejs API, który umożliwia interakcję JavaScript z elementami na stronie internetowej HTML.
Dowiedz się więcej: Ukryty bohater stron internetowych: Zrozumienie DOM
Aby dodawać detektory zdarzeń i pobierać dane wejściowe użytkownika, musisz zrozumieć podstawy manipulacji DOM. Oto przykład wyjaśniający, jak zmienić zawartość strony internetowej za pomocą interfejsu API DOM i JavaScript:
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
W powyższym kodzie,
Teraz, gdy znasz już podstawy manipulacji DOM, przejdźmy dalej i zaimplementuj walidację formularzy.
Walidacja formularza za pomocą JavaScript
Istnieją różne rodzaje danych wejściowych, które możesz pobrać od użytkownika. Typ tekstu, typ wiadomości e-mail, typ hasła, przyciski opcji i pola wyboru to tylko niektóre z najczęstszych, z którymi możesz się spotkać. Ze względu na tę ogromną większość typów danych wejściowych będziesz musiał użyć innej logiki, aby zweryfikować każdy z nich.
Zanim zagłębimy się w walidację, poświęćmy chwilę na zrozumienie formularzy HTML i ich znaczenia. Formularze HTML są jednym z podstawowych sposobów interakcji z witryną, ponieważ umożliwiają wprowadzanie danych, stosowanie zmian, wywoływanie wyskakujących okienek, przesyłanie informacji na serwer i nie tylko.
jak zmienić system Windows lokalizacji kopii zapasowej iTunes 10
HTML Element służy do tworzenia formularzy skierowanych do użytkownika. Oto jak możesz zweryfikować dane wejściowe formularza HTML:
1. Walidacja e-mail
Niezależnie od tego, czy tworzysz system uwierzytelniania, czy po prostu zbierasz e-maile użytkowników do biuletynu, ważne jest, aby zweryfikować e-mail przed zapisaniem go w bazie danych lub przetworzeniem. Aby sprawdzić, czy wiadomość e-mail spełnia wszystkie wymagane warunki, możesz użyć a Wyrażenie regularne .
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. Weryfikacja hasła
Hasła to kluczowa część danych, która wymaga specjalnego rodzaju weryfikacji, aby zapewnić jej bezpieczeństwo. Rozważ formularz rejestracyjny zawierający dwa pola: hasło i pola potwierdzenia hasła. Aby zweryfikować te pary danych wejściowych, oto kilka rzeczy, które musisz wziąć pod uwagę:
- Hasło musi mieć więcej niż 6 znaków.
- Wartość hasła i pola potwierdzenia hasła muszą być takie same.
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. Walidacja wejścia radiowego
Wejście radiowe HTML to specjalny rodzaj graficznego elementu sterującego, który pozwala użytkownikowi wybrać tylko jedną z predefiniowanych zestawów wzajemnie wykluczających się opcji. Typowym przypadkiem użycia takich danych wejściowych byłby wybór płci. Aby zatwierdzić takie dane wejściowe, musisz sprawdzić, czy przynajmniej jeden z nich jest wybrany.
Można to osiągnąć za pomocą operatory logiczne takie jak AND ( && ) i nie ( ! ) operator w ten sposób:
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. Wybierz Walidacja wejścia
ten Element HTML służy do tworzenia listy rozwijanej. ten tagi wewnątrz element zdefiniuj dostępne opcje na liście rozwijanej. Każdy z tych tagi mają powiązany z nimi atrybut wartości.
porównaj iphone'a 12 pro i pro max
W przypadku opcji domyślnej lub początkowej możesz ustawić jej wartość jako pusty ciąg, aby została uznana za nieprawidłową opcję. Dla wszystkich pozostałych opcji ustaw odpowiedni atrybut wartości. Oto przykład, w jaki sposób można zweryfikować a element wejściowy:
HTML:
Select One
Mr
Mrs
Ms
JavaScript:
aplikacja, aby zobaczyć, kto przestał Cię obserwować na Instagramie
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. Walidacja pola wyboru
Elementy wejściowe pola wyboru typu są domyślnie renderowane jako pola, które są zaznaczone lub zaznaczone po aktywacji. Pole wyboru umożliwia wybranie pojedynczych wartości do przesłania w formularzu. Pola wyboru są popularnym wyborem w przypadku danych wejściowych „zaakceptuj warunki”.
Aby dowiedzieć się, czy pole wyboru jest zaznaczone, czy nie, możesz uzyskać dostęp do zaznaczonego atrybutu na wejściu pola wyboru. Oto przykład:
HTML:
I agree to the terms and conditionsJavaScript:
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
Lepiej jest zapobiegać niż leczyć
Zawsze zaleca się weryfikację wszystkich danych wejściowych, które otrzymujesz od odwiedzającego, aby zapewnić bezpieczne korzystanie z serwisu. Hakerzy zawsze próbują wprowadzić złośliwe dane do pól wejściowych, aby przeprowadzić ataki cross-site scripting i wstrzyknięcia SQL.
Teraz, kiedy już wiesz, jak sprawdzić poprawność danych wejściowych HTML, dlaczego nie spróbować tego, tworząc formularz i wdrażając strategie, które widziałeś powyżej?
Udział Udział Ćwierkać E-mail Jak stworzyć formularz w HTMLZezwól użytkownikom na wprowadzanie danych w Twoich witrynach za pomocą formularzy HTML.
Czytaj dalej Powiązane tematy- Programowanie
- HTML
- JavaScript
- Tworzenie stron internetowych
- Poradniki kodowania
Nitin jest zapalonym programistą i studentem inżynierii komputerowej tworzącym aplikacje internetowe przy użyciu technologii JavaScript. Pracuje jako niezależny programista stron internetowych, aw wolnym czasie lubi pisać dla Linuksa i programowania.
Więcej od Nitina RanganathaZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować