Introduzione ai moduli in JavaScript

JavaScript è un linguaggio di programmazione comunemente utilizzato nelle applicazioni Web per il calcolo, la manipolazione e la convalida dei dati, la creazione di pagine dinamiche e l'interazione con l'utente. Poiché JavaScript ha molti casi d'uso, in questo articolo impareremo i moduli e la convalida dei moduli tramite JavaScript.

Con l'aiuto di JavaScript, possiamo migliorare, convalidare il modulo HTML e i suoi elementi sul lato client senza nemmeno invocare il server. JavaScript può garantire che tutti i requisiti siano soddisfatti dall'utente prima di inviare il modulo al programma di candidatura.

Poiché possiamo convalidare il modulo sul lato client, l'elaborazione dei dati diventa più veloce rispetto alla convalida sul lato server. La maggior parte degli sviluppatori Web utilizza la convalida dei moduli JavaScript.

Convalida di moduli e moduli in JavaScript

I moduli sono una sezione importante di qualsiasi applicazione Web per raccogliere informazioni, feedback o domande degli utenti. Attraverso JavaScript, possiamo fornire una migliore esperienza utente visualizzando i risultati per l'utente in modo efficiente.

Gli elementi più comunemente utilizzati nei moduli per raccogliere dati sono:

  • Casella di testo: per inserire un testo
  • Pulsante: per eseguire un'azione
  • Pulsanti di opzione : per selezionare un'opzione tra un gruppo di opzioni
  • Caselle di controllo: per selezionare o deselezionare una singola opzione indipendente

Quando implementiamo i moduli, dobbiamo fornire un nome al nostro modulo e agli elementi che abbiamo usato nel nostro modulo perché i nomi che abbiamo assegnato ci aiutano a fare riferimento a quell'oggetto (modulo e relativo elemento) nel nostro JavaScript.

Una forma tipica assomiglia a quella mostrata di seguito,

Codice:



Nota: ho fornito NAME = attributi per tutti gli elementi del modulo, incluso il modulo stesso.

Il modulo JavaScript utilizza gestori di eventi, come onClick o onSubmit per invocare un'azione JavaScript quando l'utente esegue un'azione nel modulo, come fare clic su un pulsante.

Esempio di raccolta e convalida delle informazioni utente in JavaScript

L'implementazione del codice per raccogliere e convalidare le informazioni dell'utente è riportata di seguito.

1. index.html

Codice:



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

Codice:

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

Codice:

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

Uscita n. 1: input utente corretto

Uscita n. 2: credenziali utente errate / mancanti

  • index.html: crea il modulo.
  • validate.js: convalida il modulo.
  • form-style.css: disegna il layout del modulo.

I dati inseriti nel modulo devono essere nel formato corretto richiesto dalla domanda e alcuni campi devono essere obbligatoriamente compilati per poter inviare il modulo.

Conclusione

In questo articolo, abbiamo appreso sul modulo e sui vari elementi o controlli utilizzati nei moduli e quale ruolo svolge JavaScript nella convalida del modulo, verifica dei dati immessi dall'utente, funzioni di gestione degli eventi quando viene eseguita un'azione come fare clic su un pulsante e i suoi benefici.

Articoli consigliati

Questa è una guida ai moduli in JavaScript. Qui discutiamo come raccogliere e convalidare le informazioni dell'utente con esempi appropriati. Puoi anche consultare i seguenti articoli per saperne di più-

  1. Incapsulamento in JavaScript (funzionante, vantaggi)
  2. I passaggi per creare oggetti in JavaScript
  3. Logica per trovare il contrario in JavaScript con esempi
  4. I 6 migliori compilatori in JavaScript
  5. Guida completa alla casella di controllo in Bootstrap
  6. Tipi di forme in reazione con esempi
  7. Guida alla convalida dei moduli HTML con esempi

Categoria:

Sviluppo software