Introduksjon til skjemaer i JavaScript

JavaScript er et programmeringsspråk som ofte brukes i webapplikasjoner for å beregne, manipulere og validere data, lage dynamiske sider og samhandle med brukeren. Siden JavaScript har mange brukssaker, lærer vi i denne artikkelen om skjemaer og skjemavalidering gjennom JavaScript.

Ved hjelp av JavaScript kan vi forbedre, validere HTML-skjemaet og dets elementer på klientsiden uten en gang å påkalle serveren. JavaScript kan sikre at alle krav blir oppfylt av brukeren før du sender skjemaet til applikasjonsprogrammet.

Siden vi kan validere skjemaet på klientsiden, blir databehandlingen raskere sammenlignet med validering på serversiden. De fleste av nettutviklerne benytter seg av validering av JavaScript-skjema.

Skjema- og skjemavalidering i JavaScript

Skjemaer er en viktig del av alle webapplikasjoner for å samle brukerinformasjon, tilbakemelding eller spørsmål. Gjennom JavaScript kan vi gi bedre brukeropplevelse ved å vise resultater til brukeren på en effektiv måte.

Element som er mest brukt i skjemaer for å samle inn data er:

  • Tekstboks: For å legge inn en tekst
  • Trykk-knapp: For å utføre en handling
  • Radioknapper: For å velge et alternativ blant en gruppe med alternativer
  • Avkrysningsbokser: For å velge eller fjerne markering av et enkelt, uavhengig alternativ

Når vi implementerer skjemaer, må vi gi et navn til skjemaet vårt og elementene vi har brukt i skjemaet vårt, fordi navnene vi har tildelt hjelper oss å henvise til dette objektet (skjemaet og dets element) i vår JavaScript.

En typisk form ser ut som den som er vist nedenfor,

Kode:



Merk: Jeg har gitt NAME = attributter for alle formelementer, inkludert selve skjemaet.

JavaScript-skjema bruker hendelsesbehandlere, for eksempel onClick eller onSubmit for å påkalle en JavaScript-handling når brukeren utfører en handling i skjemaet, som å klikke på en knapp.

Eksempel for å samle og validere brukerinformasjon i JavaScript

Koden implementering for å samle inn og validere brukerinformasjon er gitt nedenfor.

1. index.html

Kode:



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

Kode:

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

Kode:

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

Utgang nr. 1: Riktig brukerinngang

Utgang nr. 2: Feil / mangler brukeropplysninger

  • index.html: Oppretter skjemaet.
  • validate.js: Validerer skjemaet.
  • form-style.css: Designer utformingen av skjemaet.

Dataene som er lagt inn i skjemaet må være i riktig format som det kreves av søknaden, og visse felt må obligatorisk fylles ut for å sende inn skjemaet.

Konklusjon

I denne artikkelen har vi lært om form og de forskjellige elementene eller kontrollene som brukes i skjemaer, og hvilken rolle JavaScript spiller i formvalidering, verifisering av data som er lagt inn av brukeren, hendelseshåndteringsfunksjoner når en handling utføres som å klikke på en knapp og fordelene.

Anbefalte artikler

Dette er en guide til skjemaer i JavaScript. Her diskuterer vi hvordan du samler inn og validerer brukerinformasjon med passende eksempler. Du kan også se på følgende artikler for å lære mer-

  1. Innkapsling i JavaScript (Arbeid, fordeler)
  2. Trinn for å lage objekter i JavaScript
  3. Logikk for å finne omvendt i JavaScript med eksempler
  4. Topp 6 kompilatorer i JavaScript
  5. Komplett guide til avkrysningsrute i Bootstrap
  6. Typer skjemaer som reageres med eksempler
  7. Veiledning for validering av HTML-skjema med eksempler

Kategori:

Programvare utvikling