Introducere în formulare în JavaScript

JavaScript este un limbaj de programare utilizat în mod obișnuit în aplicația web pentru calcularea, manipularea și validarea datelor, crearea de pagini dinamice și interacțiunea cu utilizatorul. Deoarece JavaScript are multe cazuri de utilizare, în acest articol vom învăța despre formulare și validarea formularelor prin JavaScript.

Cu ajutorul JavaScript, putem îmbunătăți, valida formularul HTML și elementele sale din partea clientului, fără să invocăm chiar serverul. JavaScript poate asigura că toate cerințele sunt îndeplinite de utilizator înainte de a trimite formularul la programul de aplicație.

Deoarece putem valida formularul din partea clientului, procesarea datelor devine mai rapidă în comparație cu validarea din partea serverului. Majoritatea dezvoltatorilor web folosesc validarea formularului JavaScript.

Validarea formularului și a formularului în JavaScript

Formularele reprezintă o secțiune importantă a oricărei aplicații web pentru a colecta informații, feedback sau întrebări ale utilizatorilor. Prin JavaScript, putem oferi o experiență mai bună utilizatorului prin afișarea rezultatelor către utilizator într-un mod eficient.

Elementele care sunt utilizate cel mai frecvent în formularele de colectare a datelor sunt:

  • Caseta de text: Pentru a introduce un text
  • Apăsați butonul: Pentru a efectua o acțiune
  • Butoane radio: Pentru a selecta o opțiune între un grup de opțiuni
  • Casete de selectare: Pentru a selecta sau deselecta o singură opțiune independentă

Atunci când implementăm formulare, trebuie să furnizăm un nume formularului nostru și elementele pe care le-am folosit în formularul nostru, deoarece numele pe care le-am atribuit ne ajută să trimitem obiectul respectiv (formularul și elementul său) din JavaScript nostru.

O formă tipică arată ca cea prezentată mai jos,

Cod:



Notă: Am furnizat NAME = atribute pentru toate elementele de formular, inclusiv formularul în sine.

Formularul JavaScript folosește gestionatorii de evenimente, cum ar fi onClick sau onSubmit pentru a invoca o acțiune JavaScript atunci când utilizatorul efectuează o acțiune în formular, cum ar fi clic pe un buton.

Exemplu pentru colectarea și validarea informațiilor utilizatorului în JavaScript

Implementarea codului pentru colectarea și validarea informațiilor utilizatorului este prezentată mai jos.

1. index.html

Cod:



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

Cod:

// 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ă-stil.css

Cod:

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

Ieșire # 1: Introducere corectă a utilizatorului

Ieșire # 2: Credențe de utilizator greșite / lipsă

  • index.html: Creează formularul.
  • validate.js: validează formularul.
  • form-style.css: Proiectează aspectul formularului.

Datele introduse în formular trebuie să fie în formatul corect, după cum solicită cererea, iar anumite câmpuri trebuie completate obligatoriu pentru a trimite formularul.

Concluzie

În acest articol, am aflat despre formular și despre diferitele elemente sau controale utilizate în formulare și ce rol joacă JavaScript în validarea formularului, verificarea datelor introduse de utilizator, funcțiile de gestionare a evenimentelor atunci când o acțiune este efectuată, cum ar fi clic pe un buton și beneficiile sale.

Articole recomandate

Acesta este un ghid pentru Formularele în JavaScript. Aici vom discuta despre cum să colectăm și să validăm informațiile utilizatorilor cu exemple adecvate. De asemenea, puteți consulta următoarele articole pentru a afla mai multe-

  1. Încapsulare în JavaScript (funcționare, avantaje)
  2. Pași pentru crearea obiectelor în JavaScript
  3. Logic pentru a găsi Reverse în JavaScript cu exemple
  4. Cele mai bune 6 compilatoare în JavaScript
  5. Ghid complet pentru caseta de selectare din Bootstrap
  6. Tipuri de formulare în reacție cu exemple
  7. Ghid pentru validarea formularelor HTML cu exemple

Categorie:

Dezvoltare de software