[Sugestão] Tratamento de erros para formato de link inadequado

Olá Joaquim, tudo bem?

A alternativa que você utilizou foi um bloco if para testar a validação da url, colocando um alert e depois lançando um erro para que o vídeo não seja adicionado na página home, é uma solução simples e eficaz para o seu problema.

Outra sugestão seria utilizar o try/catch diretamente na função de validação de link, para que você possa capturar o erro e tratá-lo de maneira adequada. Dessa forma, você poderia evitar o uso do bloco if e do throw new Error().

De qualquer forma, é importante lembrar que não existe uma solução perfeita e que cada projeto tem suas particularidades. O importante é buscar sempre a melhor solução possível para o seu caso específico e você o fez! Parabéns pela dedicação ao projeto :D

E muito obrigada por compartilhar com a gente, a sua contribuição é super bem vinda.

Um abraço e bons estudos.

Oi Lorena, tudo bem sim! Contigo? Da maneira que propôs quebrei um pouquinho mais a cabeça e mudei a forma que funciona a função validaLink.

Aqui vai o código:

import { conectaApi } from "./conectaApi.js"
const formulario = document.querySelector("[data-formulario]")

function validaLink(url) {
    const regex = /^https:\/\/www\.youtube\.com\/embed\/[a-zA-Z0-9_-]{11}$/

    if( !regex.test(url) ) {
        throw new Error("Formato de link inadequado.")
    }
}

async function criaVideo(evento) {
    evento.preventDefault()

    const imagem = document.querySelector("[data-imagem]").value
    const url = document.querySelector("[data-url]").value
    const titulo = document.querySelector("[data-titulo]").value
    const descricao = Math.floor(Math.random() * 10).toString()

    try{
        validaLink(url)
        await conectaApi.criaVideo(titulo, descricao, url, imagem)
        window.location.href = "../pages/envio-concluido.html"
    } catch(e){
        alert(e)
    }

}

formulario.addEventListener("submit", evento => criaVideo(evento))

Oi Joaquim,

Isso mesmo, você poderia implementar essa sugestão da seguinte forma mais ou menos:

function validaLink(url) {
  try {
    const regex = /^https:\/\/www\.youtube\.com\/embed\/[a-zA-Z0-9_-]{11}$/
    if (!regex.test(url)) {
      throw new Error('Formato de link inadequado!')
    }
    return true
  } catch (error) {
    alert(error.message)
    return false
  }
}

Dessa forma, se o link não estiver em conformidade com a regex, um erro será lançado com a mensagem "Formato de link inadequado!".

Esse erro será capturado pelo bloco catch, que exibirá um alerta com a mensagem de erro e retornará false. Caso o link seja válido, a função retornará true.

Um abraço e bons estudos :)

Entendi perfeitamente, Lorena. Mas agora me surgiu outra dúvida: Funcionaria da mesma maneira caso eu tentasse colocar esse regex dentro do pattern no próprio código HTML do meu projeto?

Opa Joaquim, não tinha visto que cê tinha editado a mensagem anterior daí mandei aquela resposta, desculpa!

Sim, é possível utilizar o mesmo padrão de expressão regular (regex) dentro do atributo pattern de um elemento HTML para validar o formato de uma entrada de usuário.

Por exemplo, você poderia adicionar o atributo pattern com o mesmo valor de regex dentro do seu HTML:

<input type="text" id="url" name="url" pattern="^https:\/\/www\.youtube\.com\/embed\/[a-zA-Z0-9_-]{11}$" required>

Dessa forma, o navegador irá verificar automaticamente se o valor inserido no campo de entrada segue o padrão definido na expressão regular. No entanto, é importante lembrar que a validação de entrada do lado do cliente pode ser contornada por usuários mal-intencionados, por isso é sempre recomendável fazer a validação do lado do servidor, como você está fazendo no seu código JavaScript.