Úvod do formulárov v JavaScripte

JavaScript je programovací jazyk, ktorý sa bežne používa vo webovej aplikácii na výpočet, manipuláciu a overovanie údajov, vytváranie dynamických stránok a interakciu s používateľom. Pretože JavaScript má veľa prípadov použitia, v tomto článku sa budeme učiť o formulároch a validácii formulárov pomocou JavaScriptu.

Pomocou JavaScriptu môžeme vylepšiť, overiť HTML formu a jej prvky na strane klienta bez toho, aby sme vyvolali server. JavaScript môže zabezpečiť, aby užívateľ splnil všetky požiadavky pred odoslaním formulára do aplikačného programu.

Keďže formulár môžeme overiť na strane klienta, spracovanie údajov sa v porovnaní s overením na strane servera zrýchli. Väčšina webových vývojárov využíva validáciu formulárov JavaScriptu.

Validácia formulárov a formulárov v JavaScripte

Formuláre sú dôležitou časťou akejkoľvek webovej aplikácie na zhromažďovanie informácií o používateľovi, spätnej väzby alebo otázok. Prostredníctvom JavaScriptu môžeme poskytnúť lepšiu používateľskú skúsenosť tým, že výsledky zobrazíme používateľovi efektívnym spôsobom.

Prvky, ktoré sa najbežnejšie používajú vo formulároch na zhromažďovanie údajov, sú:

  • Textové pole: Zadanie textu
  • Tlačidlo: Na vykonanie akcie
  • Rádiové tlačidlá: Výber možnosti zo skupiny možností
  • Zaškrtávacie políčka: Výber alebo zrušenie výberu jednej nezávislej možnosti

Pri implementácii formulárov musíme poskytnúť meno nášmu formuláru a prvkom, ktoré sme použili v našom formulári, pretože mená, ktoré sme priradili, nám pomáhajú odkazovať tento objekt (formulár a jeho prvok) v našom skripte JavaScript.

Typický tvar vyzerá ako ten, ktorý je uvedený nižšie,

kód:



Poznámka: Poskytol som NAME = atribúty pre všetky prvky formulára vrátane samotného formulára.

Formulár JavaScriptu využíva obsluhy udalostí, ako napríklad onClick alebo onSubmit, na vyvolanie akcie JavaScriptu, keď používateľ vykoná akciu vo formulári, napríklad kliknutie na tlačidlo.

Príklad zhromažďovania a overovania informácií o používateľovi v jazyku JavaScript

Implementácia kódu na zhromažďovanie a overovanie informácií o používateľovi je uvedená nižšie.

1. index.html

kód:



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

kód:

// 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

kód:

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;
)

Výstup č. 1: Správny vstup používateľa

Výstup č. 2: Chybné alebo chýbajúce poverenia používateľa

  • index.html: Vytvorí formulár.
  • validate.js: Overí platnosť formulára.
  • form-style.css: Navrhuje rozloženie formulára.

Údaje uvedené vo formulári musia byť v správnom formáte, ako sa vyžaduje v žiadosti, a na odoslanie formulára je potrebné povinne vyplniť určité polia.

záver

V tomto článku sme sa dozvedeli o formulári a rôznych prvkoch alebo ovládacích prvkoch použitých vo formulároch a o tom, akú úlohu hrá JavaScript pri validácii formulára, overovaní údajov zadaných používateľom, funkciách spracovania udalostí pri vykonávaní akcie, ako je kliknutie na tlačidlo a jej výhody.

Odporúčané články

Toto je sprievodca Formami v JavaScripte. Tu diskutujeme o tom, ako zhromažďovať a overovať informácie o používateľovi pomocou vhodných príkladov. Viac informácií nájdete aj v nasledujúcich článkoch

  1. Zapuzdrenie do JavaScriptu (pracovné, výhody)
  2. Kroky na vytvorenie objektov v JavaScripte
  3. Logika na nájdenie reverzu v JavaScripte s príkladmi
  4. Top 6 kompilátorov v JavaScripte
  5. Kompletný sprievodca začiarkavacím políčkom v Bootstrap
  6. Druhy formulárov v reakcii s príkladmi
  7. Sprievodca overením formátu HTML s príkladmi

Kategórie:

Vývoj softvéru