Uvod v obrazce v JavaScript

JavaScript je programski jezik, ki se običajno uporablja v spletni aplikaciji za izračun, manipuliranje in preverjanje podatkov, izdelavo dinamičnih strani in interakcijo z uporabnikom. Ker ima JavaScript veliko primerov uporabe, bomo v tem članku spoznavali obrazce in potrjevanje obrazcev s pomočjo JavaScript.

S pomočjo JavaScripta lahko izboljšamo, potrdimo obrazec HTML in njegove elemente na strani odjemalca, ne da bi pri tem celo poklicali strežnik. JavaScript lahko zagotovi, da uporabnik izpolni vse zahteve, preden predloži obrazec v aplikacijski program.

Ker lahko obrazec potrdimo na strani odjemalca, obdelava podatkov postane hitrejša v primerjavi z preverjanjem na strani strežnika. Večina spletnih razvijalcev uporablja preverjanje obrazca JavaScript.

Obrazec in potrditev obrazca v JavaScript

Obrazci so pomemben del katere koli spletne aplikacije za zbiranje uporabniških informacij, povratnih informacij ali poizvedb. Skozi JavaScript lahko zagotovimo boljšo uporabniško izkušnjo, tako da uporabniku na učinkovit način prikažemo rezultate.

Elementi, ki se najpogosteje uporabljajo v obrazcih za zbiranje podatkov, so:

  • Besedilno polje: za vnos besedila
  • Pritisnite gumb: za izvedbo dejanja
  • Izbirni gumbi: Izberite možnost med skupino možnosti
  • Potrditvena polja: Če želite izbrati ali preklicati eno samostojno možnost

Ko izvajamo obrazce, moramo obrazcu navesti ime in elemente, ki smo jih uporabili, saj nam imena, ki smo jih dodelili, pomagajo pri navajanju tega predmeta (obrazca in njegovega elementa) v našem JavaScript.

Značilna oblika je videti, kot je prikazano spodaj,

Koda:



Opomba: Za vse elemente obrazca, vključno s samim obrazcem, sem zagotovil atribute NAME =.

JavaScript obrazec uporablja prirezovalnike dogodkov, na primer onClick ali onSubmit, da pri uporabniku izvedejo dejanje v obrazcu, kot je klik gumba.

Primer za zbiranje in potrjevanje uporabniških informacij v JavaScript

Spodaj je podana izvedba kode za zbiranje in potrjevanje uporabniških informacij.

1. index.html

Koda:



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

Koda:

// 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. obrazec-style.css

Koda:

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

Izhod # 1: Pravilni uporabniški vnos

Izhod # 2: Napačni / manjkajoči uporabniški podatki

  • index.html: ustvari obrazec.
  • validate.js: potrdi obrazec.
  • form-style.css: Oblikuje postavitev obrazca.

Podatki, vneseni v obrazec, morajo biti v pravilni obliki, kot jo zahteva aplikacija, za oddajo obrazca pa je treba obvezno izpolniti nekatera polja.

Zaključek

V tem članku smo spoznali obrazec ter različne elemente ali kontrolnike, ki se uporabljajo v obrazcih, in kakšno vlogo igra JavaScript pri preverjanju obrazca, preverjanju podatkov, ki jih vnese uporabnik, funkcijah ravnanja z dogodki, ko se izvede dejanje, kot je klik gumba in njegove koristi.

Priporočeni članki

To je vodnik za Obrazci v JavaScript. Tukaj razpravljamo o tem, kako zbrati in potrditi uporabniške podatke z ustreznimi primeri. Če želite izvedeti več, si oglejte tudi naslednje članke -

  1. Inkapsulacija v JavaScript (Delo, Prednosti)
  2. Koraki za ustvarjanje predmetov v JavaScript
  3. Logika za iskanje povratnega v JavaScriptu s primeri
  4. Najboljših 6 prevajalnikov v JavaScript
  5. Celoten vodnik po potrditvenem polju v Bootstrapu
  6. Vrste obrazcev v reagiranju s primeri
  7. Vodnik za preverjanje obrazca HTML s primeri

Kategorija:

Razvoj programske opreme