05 - Resolução - Validador de email e senha

Arquivo index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registre-se</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <section>
        <h1>Registre-se para usar nosso app!</h1>
        <form>
            <label for="name">Nome:</label>
            <input type="text" name="name" id="name">
            <span id="name-error"></span>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email">
            <span id="email-error"></span>
            <label for="password">Senha:</label>
            <input type="password" name="password" id="password">
            <span id="password-error"></span>
            <button type="submit">Registrar</button>
        </form>
    </section>

    <script src="index.js"></script>
</body>
</html>

Arquivo index.css:

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
h1 {
    margin: 0 0 1.5rem;
    text-align: center;
}
section {
    background-color: #eaedf1;
    border-radius: .5rem;
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.5);
    margin: 1.5rem auto;
    max-width: 25rem;
    padding: 2rem;
}
form {
    display: flex;
    flex-direction: column;
}
label {
    margin-top: 1.25rem;
    margin-bottom: .5rem;
}
input {
    border: 0;
    border-radius: .25rem;
    font-size: 1rem;
    padding: .5rem;
}
span {
    color: #f64348;
    font-size: .75rem;
    margin: .25rem;
}
button {
    background-color: #43a5f6;
    border: 0;
    border-radius: .25rem;
    font-size: 1rem;
    margin-top: 1.5rem;
    padding: .5rem 0;
    text-transform: uppercase;
}
button:hover {
    cursor: pointer;
    filter: brightness(0.9);
}
.error {
    border: 1px solid #f64348;
}
.success {
    border: 1px solid #43f67f;
}

Arquivo index.js:

function validateEmail(email) {
    if (!email.match(/\\w{2,}@[a-zA-Z]{2,}\\.[a-zA-Z]{2,}/)) {
        const err = new Error('Email inválido.')
        err.input = 'email'
        throw err
    }
}

function validatePassword(password) {
    if (
        password.length < 8 || 
        !password.match(/[a-z]/) || 
        !password.match(/[A-Z]/) || 
        !password.match(/[0-9]/) ||
        !password.match(/[^a-zA-Z0-9\\s]/)
    ) {
        const err = new Error('Senha inválida.')
        err.input = 'password'
        throw err
    }
}

function resetFormStyles() {
    Object.entries(userInputs).forEach(([key, value]) => {
        value.classList.remove('success', 'error')
        document.querySelector(`#${key}-error`).textContent = ''
    })
}

const userInputs = {}

userInputs.name = document.querySelector('#name')
userInputs.email = document.querySelector('#email')
userInputs.password = document.querySelector('#password')

const form = document.querySelector('form')

form.addEventListener('submit', (ev) => {
    ev.preventDefault()
    resetFormStyles()
    try {
        userInputs.name.classList.add('success')
        validateEmail(userInputs.email.value)
        userInputs.email.classList.add('success')
        validatePassword(userInputs.password.value)
        userInputs.password.classList.add('success')
    } catch (err) {
        userInputs[err.input].classList.add('error')
        document.querySelector(`#${err.input}-error`).textContent = err.message
    }
})