Sissejuhatus vormidesse JavaScriptis

JavaScript on programmeerimiskeel, mida kasutatakse tavaliselt veebirakendustes andmete arvutamiseks, töötlemiseks ja kinnitamiseks, dünaamiliste lehtede tegemiseks ja kasutajaga suhtlemiseks. Kuna JavaScriptil on palju kasutusjuhte, õpime selles artiklis õppima vorme ja vormide valideerimist JavaScripti kaudu.

JavaScripti abil saame HTML-i vormi ja selle elemente kliendi poolel täiustada, kinnitada, isegi mitte serverit kutsumata. Enne vormi rakendusprogrammile saatmist saab JavaScripti abil tagada, et kasutaja täidab kõik nõuded.

Kuna vormi saab kinnitada kliendi poolel, muutub andmetöötlus serveripoolse valideerimisega võrreldes kiiremaks. Enamik veebiarendajaid kasutab JavaScripti vormi valideerimist.

Vormi ja vormi kinnitamine JavaScriptis

Vormid on mis tahes veebirakenduste oluline osa kasutajateabe, tagasiside või päringute kogumiseks. JavaScripti kaudu saame pakkuda paremat kasutajakogemust, kuvades kasutajale tulemusi tõhusal viisil.

Andmete kogumiseks vormides kasutatakse kõige sagedamini järgmisi elemente:

  • Tekstikast: teksti sisestamiseks
  • Surunupp: toimingu tegemiseks
  • Raadionupud: valiku valimiseks grupist
  • Märkeruudud: ühe sõltumatu valiku valimiseks või tühistamiseks

Vormide rakendamisel peame oma vormile ja elementidele, mida oleme oma vormingus kasutanud, andma nime, sest meie määratud nimed aitavad meil viidata sellele objektile (vorm ja selle element) meie JavaScriptis.

Tüüpiline vorm näeb välja selline, nagu allpool näidatud,

Kood:



Märkus . Kõigi vormielementide, sealhulgas vormi enda jaoks, olen andnud atribuudid NAME =.

JavaScripti vorm kasutab sündmuste käitlejaid, näiteks onClick või onSubmit, JavaScripti toimingu käivitamiseks, kui kasutaja teeb vormis toimingu, näiteks nupule klõpsamise.

Näide kasutaja teabe kogumiseks ja kinnitamiseks JavaScriptis

Kooditeostus kasutaja teabe kogumiseks ja kinnitamiseks on toodud allpool.

1. register.html

Kood:



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

Kood:

// 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. vorm-stiil.css

Kood:

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

1. väljund: õige kasutajasisend

2. väljund: valed / puuduvad kasutajate mandaadid

  • index.html: loob vormi.
  • valide.js: valideerib vormi.
  • form-style.css: kujundab vormi paigutuse.

Vormi sisestatud andmed peavad olema õiges vormingus, nagu taotlus nõuab, ja vormi esitamiseks tuleb teatavad väljad kohustuslikult täita.

Järeldus

Selles artiklis oleme õppinud vormi ja mitmesuguste vormides kasutatavate elementide või juhtelementide kohta ning selle kohta, millist rolli mängib JavaScript vormi valideerimisel, kasutaja sisestatud andmete kontrollimisel, sündmusekäitlemise funktsioonidel, kui toiming teostatakse nagu nupu klõpsamine ja selle eelised.

Soovitatavad artiklid

See on JavaScripti vormide juhend. Siin arutatakse, kuidas koguda ja valideerida kasutajateavet koos sobivate näidetega. Lisateabe saamiseks võite vaadata ka järgmisi artikleid -

  1. Kapseldamine JavaScripti (töötamine, eelised)
  2. Objektide loomise sammud JavaScriptis
  3. Loogika JavaScripti pöördotsingu leidmiseks koos näidetega
  4. Kuus parimat koostajat JavaScriptis
  5. Bootstrapis asuva märkeruudu täielik juhend
  6. Vormide tüübid reageerige näidetega
  7. HTML-i vormi valideerimise juhend koos näidetega

Kategooria:

Tarkvaraarendus