configurando PATTERN ou JS- Campo de login com Email ou CPF

Boa tarde!

Estou batendo a cabeça numa configuração simples, porém que foge do meu conhecimento, andei pesquisando na internet, mas não encontrei uma solução que funcionasse na minha pagina.

Preciso apenas configurar o pattern do input para receber dados tanto de email, quanto de cpf

para simplificar meu sistema, limitei meu usuario a cadastrar apenas os numeros do CPF, porem como meu sistema permite que o usuario se logue pelo email ou pelo cpf, não conseguigo configurar o pattern do login

eu gostaria que meu pattern permitisse apenas letras e numeros e FACULTATIVO o "@" e "."

mas ai eu so estou conseguindo fazer sem o "@" e "." ou com "@" e "."

esse facultativo que nao sei como colocar dentro do pattern.

Existe essa possibilidade ou teria que ser por javascript mesmo?

alguem me da uma luz!!!!

o meu sonho seria um campo que conseguisse diferenciar se esta sendo preenchido como [caractere]@[caractere].[caractere] ou [3car].[3car].[3car]-[2ca], mas isso é muito dificil, estou errado?

não tenho ideia se isso é possivel ou como poderia ser feito, esse foi o principal motivo de eu limitar o usuario a cadastrar somente numeros (sei que existe como fazer um "editar" na hora do POST, mas por enquanto meus estudos não chegaram ate ai)

muito obrigado!!!