Home-theater-designers
JavaScript è uno dei linguaggi di programmazione più popolari e versatili con cui puoi iniziare oggi. Si dice giustamente che questo linguaggio di programmazione sia il linguaggio del web ed è essenziale per aggiungere interattività ai tuoi siti web.
L'elemento form è uno degli elementi HTML più utilizzati sui siti web. Questi moduli prendono input dall'utente e li elaborano nel browser o nel server. Tuttavia, è importante convalidare questi input per affrontare problemi di sicurezza e bug indesiderati.
Comprensione della manipolazione del DOM
Prima di procedere all'implementazione della convalida dei moduli lato client con JavaScript, è essenziale comprendere il Document Object Model, comunemente noto come 'DOM'. Il DOM è un'API standardizzata che consente a JavaScript di interagire con gli elementi su una pagina Web HTML.
Ulteriori informazioni: L'eroe nascosto dei siti Web: comprendere il DOM
Per aggiungere ascoltatori di eventi e recuperare gli input dell'utente, dovrai comprendere le basi della manipolazione del DOM. Ecco un esempio che spiega come modificare i contenuti della pagina web utilizzando l'API DOM e JavaScript:
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
Nel codice sopra, il
Ora che hai compreso le basi della manipolazione del DOM, andiamo avanti e implementiamo la convalida del modulo.
Convalida del modulo con JavaScript
Ci sono vari tipi di input che puoi prendere da un utente. Tipo di testo, tipo di email, tipo di password, pulsanti di opzione e caselle di controllo sono alcuni dei più comuni che potresti incontrare. A causa di questa vasta maggioranza di tipi di input, sarà necessario utilizzare una logica diversa per convalidare ciascuno di essi.
Prima di approfondire la convalida, prendiamoci un momento per comprendere i moduli HTML e la loro importanza. I moduli HTML sono uno dei modi principali con cui interagisci con il sito Web in quanto ti consentono di inserire i tuoi dati, applicare modifiche, richiamare popup, inviare informazioni a un server e altro ancora.
interfaccia adb composita Android Windows 10
L'HTML viene utilizzato per creare questi moduli rivolti all'utente. Ecco come puoi convalidare gli input di un modulo HTML:
1. Convalida e-mail
Sia che tu stia creando un sistema di autenticazione o semplicemente raccogliendo le email degli utenti per la tua newsletter, è importante convalidare l'email prima di poterla archiviare nel tuo database o elaborarla. Per verificare se un'e-mail soddisfa tutte le condizioni richieste, puoi utilizzare a espressione regolare .
HTML:
JavaScript:
const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}2. Convalida della password
Le password sono un dato cruciale che necessita di un tipo speciale di convalida per garantirne la sicurezza. Considera un modulo di iscrizione con due campi: password e conferma password. Per convalidare questa coppia di input, ecco alcune cose che devi considerare:
- La password deve essere lunga più di 6 caratteri.
- Il valore della password e il campo conferma password devono essere gli stessi.
HTML:
JavaScript:
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}3. Convalida dell'ingresso radio
L'input radio HTML è un tipo speciale di elemento di controllo grafico che consente all'utente di scegliere solo una di un insieme predefinito di opzioni che si escludono a vicenda. Un caso d'uso comune di tale input sarebbe per la selezione del genere. Per convalidare tale input, dovrai verificare se almeno uno di essi è selezionato.
Ciò può essere ottenuto utilizzando il operatori logici come AND ( && ) e non ( ! ) operatore in questo modo:
HTML:
Male
Female
Others
JavaScript:
const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!'); 4. Seleziona Convalida input
Il L'elemento HTML viene utilizzato per creare un elenco a discesa. Il tag all'interno del elemento definisce le opzioni disponibili nell'elenco a discesa. Ognuno di questi i tag hanno un attributo di valore ad essi associato.
cos'è più economico uber o lyft?
Per l'opzione predefinita o iniziale, puoi impostare il suo valore su una stringa vuota in modo che venga considerata un'opzione non valida. Per tutte le altre opzioni, impostare un attributo di valore appropriato. Ecco un esempio di come puoi convalidare a elemento di ingresso:
HTML:
Select One
Mr
Mrs
Ms
JavaScript:
storia della casa per indirizzo gratis
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. Convalida della casella di controllo
Gli elementi di input della casella di controllo del tipo vengono visualizzati per impostazione predefinita come caselle che vengono selezionate o spuntate quando attivate. Una casella di controllo consente di selezionare singoli valori per l'invio in un modulo. Le caselle di controllo sono una scelta popolare per l'input 'accetta termini e condizioni'.
Per scoprire se una casella di controllo è selezionata o meno, è possibile accedere all'attributo selezionato nell'input della casella di controllo. Ecco un esempio:
HTML:
I agree to the terms and conditionsJavaScript:
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
Prevenire è meglio che curare
È sempre consigliabile convalidare tutti gli input che ricevi da un visitatore per fornire un'esperienza sicura e protetta. Gli hacker cercano sempre di inserire dati dannosi nei campi di input per eseguire attacchi di scripting tra siti e iniezioni SQL.
Ora che hai capito come convalidare i tuoi input HTML, perché non provarlo costruendo un modulo e implementando le strategie che hai visto sopra?
Condividere Condividere Tweet E-mail Come creare un modulo in HTMLConsenti ai tuoi utenti di inserire dati sui tuoi siti web con moduli HTML.
Leggi Avanti Argomenti correlati- Programmazione
- HTML
- JavaScript
- Sviluppo web
- Tutorial sulla programmazione
Nitin è un appassionato sviluppatore di software e uno studente di ingegneria informatica che sviluppa applicazioni web utilizzando le tecnologie JavaScript. Lavora come sviluppatore web freelance e gli piace scrivere per Linux e Programmazione nel suo tempo libero.
Altro da Nitin RanganathIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti