Formularze JavaScript

Walidacja formularzy JavaScript

Walidacja formularzy HTML może być wykonana za pomocą JavaScript.

Jeśli pole formularza (fname) jest puste, funkcja wyświetli komunikat i zwróci false, aby zapobiec wysłaniu formularza:

Przykłady JavaScript

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Imię musi być wypełnione");
    return false;
  }
}

Można wywołać tę funkcję podczas wysyłania formularza:

Przykład formularza HTML

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Imię: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Spróbuj samodzielnie

JavaScript może walidować wejście liczbowe

JavaScript jest zazwyczaj używany do walidacji wejścia liczbowego:

Wprowadź liczbę z zakresu 1 do 10:

Spróbuj samodzielnie

Automatyczna walidacja formularzy HTML

Automatyczna walidacja formularzy HTML może być wykonywana przez przeglądarkę:

Jeśli pole formularza (fname) jest puste, to Określ minimalną wartość elementu input. Atrybuty zapobiegają wysłaniu tego formularza:

Przykład formularza HTML

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Spróbuj samodzielnie

Wskazówka:Automatyczna walidacja formularzy HTML w przeglądarce Internet Explorer 9 lub wcześniejszych wersji nie działa.

Walidacja danych

Walidacja danych to proces zapewniający, że wprowadzone dane są czyste, poprawne i użyteczne.

Typowe zadania walidacji to:

  • Czy użytkownik wypełnił wszystkie wymagane pola?
  • Czy użytkownik wprowadził poprawną datę?
  • Czy użytkownik wprowadził tekst w polu liczbowym?

W większości przypadków celem walidacji danych jest upewnienie się, że użytkownik wprowadził poprawne dane.

Walidacja może być zdefiniowana na wiele sposobów i w wielu różnych方式.

Walidacja serwerowa jest wykonywana przez serwer Web po wysłaniu danych do serwera.

Przed wysłaniem danych do serwera, klient potwierdza dane za pomocą przeglądarki internetowej.

Walidacja konwencyjna HTML

HTML5 wprowadziło nowy koncept walidacji HTML, zwany walidacją konwencyjną.

HTML 约束验证基于：

  • 约束验证 HTML input 属性
  • Określ pole input jako wymagane.
  • 约束验证 DOM 属性和方法

约束验证 HTML input 属性

Walidacja HTML oparta na: Określ typ elementu input.
Walidacja DOM atrybutów i metod Walidacja HTML input
Atrybuty disabled
Określ, że element input powinien być wyłączony. max
Określ maksymalną wartość elementu input. min
Określ minimalną wartość elementu input. pattern
Określ wzorzec wartości elementu input. required

Aby uzyskać pełną listę, odwiedź Atrybuty HTML Input.

Określ pole input jako wymagane.

type Określ typ elementu input.
Pseudoselektor walidacji CSS Wybieracz
Opis :disabled
:invalid :optional
:required :required
:valid Wybierz element input z wartością

Aby uzyskać pełną listę, odwiedź Pseudoklasy CSS.