Introduktion til formularer i JavaScript

JavaScript er et programmeringssprog, der ofte bruges i webapplikation til beregning, manipulering og validering af data, oprettelse af dynamiske sider og interaktion med brugeren. Da JavaScript har mange brugssager, lærer vi i denne artikel om formularer og formvalidering gennem JavaScript.

Ved hjælp af JavaScript kan vi forbedre, validere HTML-formen og dens elementer på klientsiden uden selv at påkalde serveren. JavaScript kan sikre, at alle krav er opfyldt af brugeren, inden de indsender formularen til applikationsprogrammet.

Da vi kan validere formularen på klientsiden, bliver databehandlingen hurtigere sammenlignet med validering på serversiden. De fleste webudviklere bruger validering af JavaScript-formular.

Validering af formular og formular i JavaScript

Formularer er en vigtig del af enhver webapplikation til at indsamle brugerinformation, feedback eller forespørgsler. Via JavaScript kan vi give bedre brugeroplevelse ved at vise resultater til brugeren på en effektiv måde.

Elementer, der oftest bruges i formularer til at indsamle data er:

  • Tekstboks: For at indtaste en tekst
  • Tryk på knappen: For at udføre en handling
  • Radioknapper: For at vælge en indstilling blandt en gruppe af indstillinger
  • Afkrydsningsfelter: For at vælge eller fravælge en enkelt, uafhængig mulighed

Når vi implementerer formularer, skal vi give et navn til vores form og de elementer, vi har brugt i vores form, fordi de navne, vi har tildelt, hjælper os med at henvise til dette objekt (form og dets element) i vores JavaScript.

En typisk form ligner den, der er vist nedenfor,

Kode:



Bemærk: Jeg har angivet NAME = attributter til alle formelementer, inklusive selve formularen.

JavaScript-formular bruger begivenhedshåndterere, såsom onClick eller onSubmit for at påkalde en JavaScript-handling, når brugeren udfører en handling i formularen, som at klikke på en knap.

Eksempel til indsamling og validering af brugeroplysninger i JavaScript

Kodenimplementering til indsamling og validering af brugerinformation gives 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;
)

Output nr. 1: Korrekt brugerinput

Output # 2: Forkert / manglende brugeroplysninger

  • index.html: Opretter formularen.
  • validate.js: Validerer formularen.
  • form-style.css: Designer formularens layout.

De data, der er indtastet i formularen, skal være i det korrekte format som krævet af ansøgningen, og visse felter skal obligatorisk udfyldes for at indsende formularen.

Konklusion

I denne artikel har vi lært om form og de forskellige elementer eller kontroller, der bruges i formularer, og hvilken rolle JavaScript spiller i formvalidering, verifikation af data indtastet af brugeren, begivenhedshåndteringsfunktioner, når en handling udføres som at klikke på en knap og dens fordele.

Anbefalede artikler

Dette er en guide til formularer i JavaScript. Her diskuterer vi, hvordan man indsamler og validerer brugeroplysninger med passende eksempler. Du kan også se på de følgende artikler for at lære mere-

  1. Indkapsling i JavaScript (Arbejde, Fordele)
  2. Trin til at oprette objekter i JavaScript
  3. Logik for at finde omvendt i JavaScript med eksempler
  4. Top 6 kompilatorer i JavaScript
  5. Komplet guide til afkrydsningsfelt i Bootstrap
  6. Typer af formularer, der reageres med eksempler
  7. Vejledning til validering af HTML-form med eksempler

Kategori:

Softwareudvikling