Uvod u obrasce u JavaScript

JavaScript je programski jezik koji se obično koristi u web aplikaciji za izračunavanje, manipuliranje i provjeru podataka, izradu dinamičnih stranica i interakciju s korisnikom. Budući da JavaScript ima mnogo slučajeva upotrebe, u ovom ćemo članku naučiti o obrascima i potvrdi obrasca putem JavaScript-a.

Pomoću JavaScripta možemo poboljšati, potvrditi HTML obrazac i njegove elemente na strani klijenta, čak i ne pozivajući poslužitelj. JavaScript može osigurati da su svi zahtjevi ispunjeni od strane korisnika prije slanja obrasca u aplikacijski program.

Budući da možemo potvrditi obrazac na strani klijenta, obrada podataka postaje brža u usporedbi s potvrdom na strani poslužitelja. Većina web programera koristi provjeru JavaScripta.

Obrazac i provjera obrasca u JavaScript

Obrasci su važan odjeljak bilo koje web aplikacije za prikupljanje korisničkih informacija, povratnih informacija ili upita. Kroz JavaScript možemo pružiti bolje korisničko iskustvo pokazujući rezultate korisniku na učinkovit način.

Elementi koji se najčešće koriste u obrascima za prikupljanje podataka su:

  • Tekstni okvir: Za unos teksta
  • Pritisnite gumb: za izvršavanje radnje
  • Radio gumbi: Za odabir opcije iz skupine opcija
  • Potvrdni okviri: Da biste odabrali ili poništili pojedinu neovisnu opciju

Prilikom implementacije obrazaca, moramo navesti naziv našeg obrasca i elemente koje smo koristili u našem obrascu, jer nam imena koja smo dodijelili pomažu da taj objekt (obrazac i njegov element) uputimo u našem JavaScript-u.

Tipičan oblik izgleda kao onaj prikazan dolje,

Kodirati:



Napomena: pružio sam atribute NAME = za sve elemente oblika, uključujući sam oblik.

JavaScript obrazac koristi alate za obradu događaja, kao što su onClick ili onSubmit kako bi pozvali JavaScript radnju kada korisnik izvede neku radnju u obrascu, poput klika na gumb.

Primjer za prikupljanje i provjeru korisničkih podataka u JavaScriptu

Provedba koda za prikupljanje i provjeru korisničkih podataka dana je u nastavku.

1. index.html

Kodirati:



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

Kodirati:

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

Kodirati:

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

Izlaz br. 1: Ispravan korisnički unos

Izlaz br. 2: Pogrešno / nedostaje vjerodajnice korisnika

  • index.html: Stvara obrazac.
  • validate.js: Provjerava obrazac.
  • form-style.css: Dizajnira izgled obrasca.

Podaci uneseni u obrazac moraju biti u ispravnom formatu kako to zahtijeva aplikacija i određena polja moraju se obvezno ispuniti da biste mogli predati obrazac.

Zaključak

U ovom smo članku naučili o obrascu i raznim elementima ili kontrolama koje se koriste u obrascima i kakvu ulogu JavaScript igra u validaciji obrasca, provjeri podataka koje je unijeo korisnik, funkcijama za upravljanje događajima kada se obavlja radnja poput klika na gumb i njegove prednosti.

Preporučeni članci

Ovo je vodič za Obrasce u JavaScriptu. Ovdje smo raspravljali o načinu prikupljanja i potvrđivanja korisničkih podataka s odgovarajućim primjerima. Možete pogledati i sljedeće članke da biste saznali više -

  1. Inkapsulacija u JavaScriptu (rad, prednosti)
  2. Koraci za stvaranje objekata u JavaScript-u
  3. Logika pronaći obrnuto u JavaScriptu s primjerima
  4. Najboljih 6 sastavljača u JavaScript-u
  5. Kompletan vodič za potvrdni okvir u sustavu Bootstrap
  6. Vrste oblika u reakciji s primjerima
  7. Vodič za provjeru HTML obrasca s primjerima

Kategorija:

Razvoj softvera