Introduktion till formulär i JavaScript

JavaScript är ett programmeringsspråk som vanligtvis används i webbapplikationer för att beräkna, manipulera och validera data, skapa dynamiska sidor och interagera med användaren. Eftersom JavaScript har många användningsfall kommer vi i denna artikel att lära oss om formulär och formulärvalidering via JavaScript.

Med hjälp av JavaScript kan vi förbättra, validera HTML-formuläret och dess element på klientsidan utan att ens anropa servern. JavaScript kan säkerställa att alla krav uppfylls av användaren innan det skickas in formuläret i applikationsprogrammet.

Eftersom vi kan validera formuläret på klientsidan blir databehandlingen snabbare jämfört med validering på serversidan. De flesta webbutvecklare använder sig av validering av JavaScript-formulär.

Form och formulärvalidering i JavaScript

Blanketter är ett viktigt avsnitt i alla webbapplikationer för att samla in användarinformation, feedback eller frågor. Genom JavaScript kan vi ge bättre användarupplevelse genom att visa resultat för användaren på ett effektivt sätt.

Element som oftast används i formulär för att samla in data är:

  • Textruta: Ange en text
  • Tryckknapp: För att utföra en åtgärd
  • Radioknappar: För att välja ett alternativ bland en grupp av alternativ
  • Kryssrutor: För att välja eller avmarkera ett enda, oberoende alternativ

När vi implementerar formulär måste vi ange ett namn på vår form och de element vi har använt i vår form eftersom namnen som vi har tilldelat hjälper oss att hänvisa dessa objekt (form och dess element) i vår JavaScript.

En typisk form ser ut som den som visas nedan,

Koda:



Obs: Jag har tillhandahållit NAME = attribut för alla formelement, inklusive själva formen.

JavaScript-formuläret använder sig av händelseshanterare, till exempel onClick eller onSubmit för att åberopa en JavaScript-åtgärd när användaren utför en åtgärd i formuläret, som att klicka på en knapp.

Exempel för att samla in och validera användarinformation i JavaScript

Kodimplementeringen för att samla in och validera användarinformation ges nedan.

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

Utgång # 1: Rätt användarinmatning

Output # 2: Fel / saknad användaruppgifter

  • index.html: Skapar formuläret.
  • validate.js: Validerar formuläret.
  • form-style.css: Utformar utformningen av formen.

Uppgifterna i formuläret måste vara i rätt format som krävs av ansökan och vissa fält måste obligatoriskt fyllas för att skicka in formuläret.

Slutsats

I den här artikeln har vi lärt oss om form och de olika elementen eller kontrollerna som används i formulär och vilken roll JavaScript spelar i formvalidering, verifiering av data som anges av användaren, händelseshanteringsfunktioner när en åtgärd utförs som att klicka på en knapp och dess fördelar.

Rekommenderade artiklar

Detta är en guide till formulär i JavaScript. Här diskuterar vi hur man samlar in och validerar användarinformation med lämpliga exempel. Du kan också titta på följande artiklar för att lära dig mer-

  1. Inkapsling i JavaScript (fungerar, fördelar)
  2. Steg för att skapa objekt i JavaScript
  3. Logik för att hitta omvänd i JavaScript med exempel
  4. Topp 6 kompilatorer i JavaScript
  5. Komplett guide till kryssrutan i Bootstrap
  6. Typer av formulär som reagerar med exempel
  7. Handbok för validering av HTML-formulär med exempel

Kategori:

Mjukvaruutveckling