Wprowadzenie do formularzy w JavaScript

JavaScript to język programowania używany powszechnie w aplikacjach internetowych do obliczania, manipulowania i sprawdzania poprawności danych, tworzenia dynamicznych stron i interakcji z użytkownikiem. Ponieważ JavaScript ma wiele przypadków użycia, w tym artykule poznamy formularze i sprawdzanie poprawności formularzy za pomocą JavaScript.

Za pomocą JavaScript możemy ulepszać, sprawdzać poprawność formularza HTML i jego elementów po stronie klienta, nawet nie wywołując serwera. JavaScript może zapewnić, że wszystkie wymagania zostaną spełnione przez użytkownika przed przesłaniem formularza do aplikacji.

Ponieważ możemy zweryfikować formularz po stronie klienta, przetwarzanie danych staje się szybsze w porównaniu z weryfikacją po stronie serwera. Większość twórców stron internetowych korzysta z weryfikacji formularzy JavaScript.

Form and Form Validation in JavaScript

Formularze są ważną sekcją każdej aplikacji internetowej służącą do zbierania informacji o użytkownikach, opinii i zapytań. Za pomocą JavaScript możemy zapewnić lepszą obsługę, wyświetlając użytkownikowi wyniki w efektywny sposób.

Elementy najczęściej używane w formularzach do gromadzenia danych to:

  • Pole tekstowe: Aby wprowadzić tekst
  • Przycisk: Aby wykonać akcję
  • Przyciski opcji: Aby wybrać opcję spośród grupy opcji
  • Pola wyboru: Aby zaznaczyć lub odznaczyć pojedynczą, niezależną opcję

Wdrażając formularze, musimy podać nazwę dla naszego formularza i elementów, których użyliśmy w naszym formularzu, ponieważ nazwy, które przypisaliśmy, pomagają nam odwoływać się do tych obiektów (formularza i jego elementu) w naszym JavaScript.

Typowa forma wygląda jak ta pokazana poniżej,

Kod:



Uwaga: Podałem NAME = atrybuty dla wszystkich elementów formularza, w tym samego formularza.

Formularz JavaScript korzysta z procedur obsługi zdarzeń, takich jak onClick lub onSubmit, aby wywołać akcję JavaScript, gdy użytkownik wykonuje akcję w formularzu, na przykład klikając przycisk.

Przykład zbierania i sprawdzania poprawności informacji o użytkowniku w JavaScript

Implementacja kodu do gromadzenia i sprawdzania poprawności informacji o użytkowniku znajduje się poniżej.

1. index.html

Kod:



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music






JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music




2. vaidate.js

Kod:

// Defining a function to display errtext message
function printerrtext(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
// Defining a function to validate form
function validateForm() (
// Retrieving the values of form elements
var name = document.demoForm.name.value;
var email = document.demoForm.email.value;
var mobile = document.demoForm.mobile.value;
var country = document.demoForm.country.value;
var gender = document.demoForm.gender.value;
var pswd = document.demoForm.pswd.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
// Populate hobbies array with selected values
hobbies.push(checkboxes(i).value);
)
)
// Defining errtext variables with a default value
var nameErr = emailErr = mobileErr = countryErr = genderErr = pswdErr = true;
// Validate name
if(name == "") (
printerrtext("nameErr", "Please enter your name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printerrtext("nameErr", "Please enter a valid name");
) else (
printerrtext("nameErr", "");
nameErr = false;
)
)
// Validate email address
if(email == "") (
printerrtext("emailErr", "Please enter your email address");
) else (
// Regular expression for basic email validation
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printerrtext("emailErr", "Please enter a valid email address");
) else(
printerrtext("emailErr", "");
emailErr = false;
)
)
// Validate mobile number
if(mobile == "") (
printerrtext("mobileErr", "Please enter your mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printerrtext("mobileErr", "Please enter a valid 10 digit mobile number");
) else(
printerrtext("mobileErr", "");
mobileErr = false;
)
)
// Validate Password
if(pswd == "")(
printerrtext("pswdErr", "Please enter your password");
) else(
var regex = /^(?=.*(0-9))(?=.*( (email protected) #$%^&*))( (email protected) #$%^&*)(6, 16)$/;
if(regex.test(pswd) === false) (
printerrtext("pswdErr", "Min : 6 chacracter in form Asd4$l");
) else(
printerrtext("pswdErr", "");
pswdErr = false;
)
)
// Validate country
if(country == "Select") (
printerrtext("countryErr", "Please select your country");
) else (
printerrtext("countryErr", "");
countryErr = false;
)
// Validate gender
if(gender == "") (
printerrtext("genderErr", "Please select your gender");
) else (
printerrtext("genderErr", "");
genderErr = false;
)
// Prevent the form from being submitted if there are any errtexts
if((nameErr || emailErr || mobileErr || countryErr || genderErr || pswdErr) == true) (
return false;
) else (
// Creating a string from input data for preview
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
// Display input data in a dialog box before submitting the form
alert(dataPreview);
)
);

3. form-style.css

Kod:

body (
font-size: 16px;
background: #f9f9f9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
)
h2 (
text-align: center;
text-decoration: underline;
)
form (
width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
)
label (
display: block;
margin-bottom: 5px
)
label i (
color: #999;
font-size: 80%;
)
input, select (
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
)
.row (
padding-bottom: 10px;
)
.form-inline (
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
)
.form-inline label, .form-inline input (
display: inline-block;
width: auto;
padding-right: 15px;
)
.errtext (
color: red;
font-size: 90%;
)
input(type="submit") (
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
)
input(type="submit"):hover (
background: #0165b6;
)

Wyjście nr 1: prawidłowe wprowadzanie danych przez użytkownika

Wyjście nr 2: Błędne / brakujące dane uwierzytelniające użytkownika

  • index.html: Tworzy formularz.
  • validate.js: Sprawdza poprawność formularza.
  • form-style.css: Projektuje układ formularza.

Dane wprowadzone w formularzu muszą mieć poprawny format wymagany przez aplikację, a niektóre pola muszą zostać obowiązkowo wypełnione w celu przesłania formularza.

Wniosek

W tym artykule dowiedzieliśmy się o formularzu i różnych elementach lub kontrolkach używanych w formularzach oraz o roli, jaką JavaScript odgrywa w sprawdzaniu poprawności formularza, weryfikacji danych wprowadzonych przez użytkownika, funkcjach obsługi zdarzeń, gdy wykonywane jest działanie, takie jak kliknięcie przycisku i jego zalety.

Polecane artykuły

To jest przewodnik po formularzach w JavaScript. Tutaj omawiamy, jak gromadzić i sprawdzać informacje o użytkownikach, podając odpowiednie przykłady. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej-

  1. Hermetyzacja w JavaScript (praca, zalety)
  2. Kroki tworzenia obiektów w JavaScript
  3. Logika wyszukiwania odwrotnego w JavaScript z przykładami
  4. Top 6 kompilatorów w JavaScript
  5. Kompletny przewodnik po polu wyboru w Bootstrap
  6. Rodzaje formularzy w reakcji z przykładami
  7. Przewodnik po sprawdzaniu poprawności formularzy HTML z przykładami

Kategoria:

Rozwój oprogramowania