Checkforcejs

Descrição

A versão 3 do checkforce.js, vem com novidades. Ele depende de 2 bibliotecas externas, são elas: o Popper para renderizar a caixa do conteúdo, e o Zxcvbn para analisar a força da senha.

Bundle

Você tem a opção de usar o checkforce com todas as library incluídas, usando o arquivo checkforce.bundle.js ou checkforce.bundle.min.js.

O Bundle dispõe de uma versão standalone que está no arquivo checkforce.js ou checkforce.min.js. Usando essa versão você terá que adicionar as dependências manualmente no seu arquivo HTML.

Usando Arquivo Único

Incluindo um único arquivo com todas as dependências.

<script src="dist/checkforce.bundle.js"></script>

versão minificada.

<script src="dist/checkforce.bundle.min.js"></script>

Usando Arquivo Separado

Usando a solução com scripts separados.


<!-- Incluindo o Popover para o tooltip -->
<script src="path/to/popper.min.js" ></script>

<!-- Incluindo o Zxcvbn para executar o algoritmo de senha -->
<script src="path/to/zxcvbn.min.js" ></script>

<!-- Incluindo a library -->
<script src="dist/checkforce.min.js" ></script>

Instalando via NPM

npm install checkforce.js --save

Exemplo

<body>
  <form>
    <label for="input-password">Senha</label>
    <input type="password" id="input-password" placeholder="Senha">
    <button type="submit">Criar</button>
  </form>

  <!-- Incluindo a biblioteca -->
  <script src="dist/checkforce.bundle.js"></script>
  <script>
    const checkForce = new CheckForce('#input-password');
  </script>
</body>

Opções Avançadas

Você pode mudar a posição da caixa de conteúdo (tooltip), usando a opção placement. Por padrão a posição da caixa é top.

Os valores que ele aceita são: left, right, bottom e auto.


<script>
  const checkForce = new CheckForce('#input-password', {
    placement: 'left'
  });
</script>

A opção auto se adapta de acordo com a resolução da tela.

Arquivos JS

Arquivo JS	Popper	Zxcvbn
checkforce.bundle.js checkforce.bundle.min.js	Incluído	Incluído
checkforce.js checkforce.min.js	--	--