A validação de formulário é uma validação que ocorre no navegador antes dos dados serem enviados ao servidor. 

você insere dados e o aplicativo verifica se os dados estão corretos. Se as informações estiverem corretas, o aplicativo permite que os dados sejam enviados ao servidor.

A validação do formulário pode ser implementada de várias maneiras diferentes e é subdividida nas seguintes categorias:

 - Avalidação de formulário interna usa os recursos de validação de
   formulário HTML5.

 - A validação do JavaScript é codificada usando JavaScript. Essa
   validação é completamente personalizável.

#Validação HTML

O recurso mais simples de validação HTML5 é o atributo [`required`][1]. Para tornar uma entrada obrigatória, marque o elemento com este atributo. Quando esse atributo é definido, o formulário não será enviado e exibirá uma mensagem de erro quando a entrada estiver vazia. A entrada também será considerada inválida.

Outro recurso de validação muito comum é o atributo [`pattern`][1], que espera uma Expressão Regular como seu valor. Uma [expressão regular][2] (regex) é um padrão que pode ser usado para combinar combinações de caracteres em cadeias de texto, portanto, as regexs são ideais para validação de formulário e servem a uma variedade de outros usos em JavaScript.

#Validação em JavaScript

Você deve usar JavaScript se quiser controlar a aparência das mensagens de erro nativas ou lidar com navegadores que não suportam a validação de formulário interna do HTML.

Aplica-se aos seguintes elementos:

 - [HTMLButtonElement][3] 
 - [HTMLFieldSetElement][4] 
 - [HTMLInputElement][5]
 - [HTMLOutputElement][6] 
 - [HTMLSelectElement][7] 
 - [HTMLTextAreaElement][8]

   

###Propriedades da API de validação 

 * `validationMessage` : Uma mensagem localizada descrevendo as restrições de validação que o controle não atende (se houver)  ou uma string vazia se o controle não for candidato à validação (willValidate é falso). 

 * `validity` : Um objeto ValidityState que descreve o estado de validade do elemento. 
                                                                                                                       
 * `willValidate` : Retorna true se o elemento for validado quando o formulário for enviado ou false caso contrário.                                                                                              


###Métodos da API de validação 

 * `checkValidity()` Retorna `true` se o valor do elemento não tiver problemas de validação, `false` caso contrário.

 * `HTMLFormElement.reportValidity()` Retornará `true` se o elemento ou seus controles filho satisfizerem as restrições de validação. Quando `false é retornado`, os eventos de validação  são disparados para cada elemento inválido e os problemas de validação são relatados ao usuário.

 * `setCustomValidity()` Adiciona uma mensagem de erro personalizada ao elemento.

-------------




Para forçar o preenchimento dos elementos do seu formulário eu apliquei o atributo `required`.

Para forçar o usuário entrar com um email válido apliquei o atributo `pattern` com a expressão regular `[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$`;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function validar(){
        var usuario = document.getElementById("usuario").value;
        var email = document.getElementById("email").value;
        var senha = document.getElementById("senha").value;
        var confirmarsenha = document.getElementById("confirmar-senha").value;
        var usuario_correto = /^[A-Za-z]+$/;
        var valido = true;

        if(usuario.length < 2 || usuario.length > 16) {
            document.getElementById("msg-usuario").innerHTML="* O nome de usúario precisa ter entre 2 a 16 caracteres";
            valido = false;
        }else if (usuario.match(usuario_correto)) {
            document.getElementById("msg-usuario").innerHTML="* O nome de usúario só pode ter letras [A-Z/a-z]"; 
            valido = false;
        }else{
            document.getElementById("msg-usuario").innerHTML="";
        }

        if(email=="") {
            document.getElementById("msg-email").innerHTML="* O email é obrigatório";
            valido = false;
        }else{
            document.getElementById("msg-email").innerHTML="";
        }

        if(senha.length < 5 || senha.length > 16) {
            document.getElementById("msg-senha").innerHTML="* A senha precisa conter de 5 a 16 caracteres";
            valido = false;
        }else{
            document.getElementById("msg-senha").innerHTML="";
        }

        if(confirmarsenha=="") {
            document.getElementById("msg-confirmar-senha").innerHTML="* Confirme a senha";
            valido = false;
        }else{
            document.getElementById("msg-confirmar-senha").innerHTML="";
        }

        return valido;
    }

<!-- language: lang-html -->

    <form class="form-registrar" onsubmit="return validar()">
        <input type="text" placeholder="Nome de usúario" class="form-campo" required id="usuario"> 
        <div class="form-msg-erro" id="msg-usuario"></div>

        <br>
        <input type="email" placeholder="Email" class="form-campo" id="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" > 
        <div class="form-msg-erro" id="msg-email"></div>

        <br>
        <input type="password" placeholder="Senha"  class="form-campo" id="senha"> 
        <div class="form-msg-erro" id="msg-senha"></div>

        <br>
        <input type="password" placeholder="Confirmar senha" class="form-campo" id="confirmar-senha"> 
        <div class="form-msg-erro" id="msg-confirmar-senha"></div>

        <br>
        <input type="submit" value="Registrar" class="form-campo-registrar">
    </form>

<!-- end snippet -->


  [1]: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input
  [2]: https://pt.wikipedia.org/wiki/Express%C3%A3o_regular
  [3]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement
  [4]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldSetElement
  [5]: http://HTMLInputElement
  [6]: http://HTMLOutputElement
  [7]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement
  [8]: http://HTMLTextAreaElement