Natuurlijk! Hier is een overzicht van hoe je een JavaScript-module kunt maken voor het valideren van gebruikersinvoer, specifiek voor het controleren van een geldig e-mailformaat. ### 1. Structuur van de module Je kunt een JavaScript-module maken met een functie of een object dat de validatie verzorgt. Bijvoorbeeld: ```javascript // emailValidator.js const emailValidator = { // Validatiefunctie validate(email) { const errors = []; // E-mail validatie regex const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!email) { errors.push("E-mail is verplicht."); } else if (!emailRegex.test(email)) { errors.push("Ongeldig e-mailformaat."); } return { valid: errors.length === 0, errors: errors }; } }; export default emailValidator; ``` ### 2. Validatieregels definiëren De belangrijkste regel voor een e-mail is dat het moet passen binnen een geldig e-mailpatroon. Dit doe je meestal met een regex: ```javascript const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; ``` Deze regex controleert dat er een tekst vóór het '@'-symbool is, dat er een domeinnaam volgt, en dat er een TLD is. ### 3. Feedback geven over validatiefouten De validatiefunctie retourneert een object dat aangeeft of de invoer valid is en welke fouten er eventueel zijn: ```javascript return { valid: errors.length === 0, errors: errors }; ``` Voorbeeldgebruik: ```javascript import emailValidator from './emailValidator.js'; const result = emailValidator.validate("voorbeeld@domein.com"); if (result.valid) { console.log("E-mail is geldig!"); } else { console.log("Fouten:", result.errors); } ``` ### Samenvatting - Maak een module met een validatiefunctie. - Gebruik regex voor het controleren van het e-mailformaat. - Geef een object terug met validatiestatus en foutmeldingen. - Integreer deze module in je toepassing om gebruikersinvoer te valideren. Wil je ook voorbeelden voor het valideren van meerdere velden of uitgebreide validatieregels?

Hier is een gestructureerde JavaScript-module voor e-mailvalidatie: ```javascript // Validatiemodule voor gebruikersinvoer const Validator = (function() { // Valideerregels definiëren const regels = { email: { patroon: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, foutmelding: 'Voer een geldig e-mailadres in' } }; // Validatieresultaat class class ValidatieResultaat { constructor(isGeldig, fouten = []) { this.isGeldig = isGeldig; this.fouten = fouten; } } // Publieke methoden return { // Valideer e-mail valideerEmail: function(email) { if (!email || typeof email !== 'string') { return new ValidatieResultaat(false, ['E-mail is verplicht']); } const fouten = []; if (!regels.email.patroon.test(email.trim())) { fouten.push(regels.email.foutmelding); } return new ValidatieResultaat(fouten.length === 0, fouten); }, // Toon foutmeldingen in de UI toonFouten: function(element, fouten) { // Verwijder bestaande foutmeldingen this.verwijderFouten(element); if (fouten.length > 0) { const foutContainer = document.createElement('div'); foutContainer.className = 'validatie-fouten'; foutContainer.style.color = 'red'; foutContainer.style.fontSize = '0.9em'; foutContainer.style.marginTop = '5px'; fouten.forEach(fout => { const foutElement = document.createElement('p'); foutElement.textContent = fout; foutElement.style.margin = '2px 0'; foutContainer.appendChild(foutElement); }); element.parentNode.appendChild(foutContainer); } }, // Verwijder foutmeldingen verwijderFouten: function(element) { const bestaandeFouten = element.parentNode.querySelector('.validatie-fouten'); if (bestaandeFouten) { bestaandeFouten.remove(); } }, // Real-time validatie (optioneel) initRealTimeValidatie: function(inputElement) { inputElement.addEventListener('blur', () => { const resultaat = this.valideerEmail(inputElement.value); if (!resultaat.isGeldig) { this.toonFouten(inputElement, resultaat.fouten); inputElement.style.borderColor = 'red'; } else { this.verwijderFouten(inputElement); inputElement.style.borderColor = 'green'; } }); } }; })(); // Gebruiksvoorbeeld: /* // 1. Basis validatie const email = 'gebruiker@voorbeeld.nl'; const resultaat = Validator.valideerEmail(email); if (resultaat.isGeldig) { console.log('E-mail is geldig'); } else { console.log('Fouten:', resultaat.fouten); } // 2. Integratie met formulier const emailInput = document.getElementById('email'); const form = document.getElementById('mijnFormulier'); // Real-time validatie Validator.initRealTimeValidatie(emailInput); // Formulier validatie form.addEventListener('submit', (event) => { const email = emailInput.value; const validatie = Validator.valideerEmail(email); if (!validatie.isGeldig) { event.preventDefault(); Validator.toonFouten(emailInput, validatie.fouten); } }); */ ``` **Uitleg van de structuur:** 1. **Module Pattern**: Gebruikt een IIFE (Immediately Invoked Function Expression) voor encapsulation 2. **Valideerregels**: E-mail regex patroon met bijbehorende foutmelding 3. **Resultaat Object**: Houdt validatiestatus en fouten bij 4. **UI Feedback**: Methoden om fouten visueel weer te geven **Validatieregels uitgelegd:** - `/^[^\s@]+@[^\s@]+\.[^\s@]+$/` controleert: - Geen spaties of @ aan het begin - Één @ symbool - Minstens één . na de @ - Geen spaties in het domein **Uitbreidingsmogelijkheden:** ```javascript // Extra regels toevoegen regels.verplicht = { patroon: /.+/, foutmelding: 'Dit veld is verplicht' }; regels.minLengte = { patroon: /.{8,}/, foutmelding: 'Moet minimaal 8 karakters bevatten' }; ``` De module is modulair opgebouwd en eenvoudig uit te breiden met aanvullende validatieregels!