Checkforce.js NPM

Uma biblioteca para verificar a força da senha

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. Ou você pode usar a versão standalone que está no arquivo checkforce.js ou checkforce.min.js e 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>

Tanto o checkforce.bundle.js quanto o checkforce.bundle.min.js incluem o Popper e o Zxcvbn.

Usando arquivo separado

Usando a solução com scripts separados.

  <script src="path/to/popper.min.js" ></script>
  
  <script src="path/to/zxcvbn.min.js" ></script>

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

Arquivos JS

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

Instalação

npm install checkforce.js --save

Usando

<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>

Por padrão a caixa de conteúdo que mostra o nível/força da senha aparece na parte superior do campo input.

checkforce-top

Você pode modificar a posição da caixa de conteúdo, da seguinte forma:

Para deixar a caixa na posição inferior: bottom.

...

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

checkforce-bottom

Para deixar a caixa na posição lateral esquerdo: left.

...

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

checkforce-left

Para deixar a caixa na posição lateral direito: right.

checkforce-right

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, CheckForce.js is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible.

For more information on SemVer, please visit http://semver.org/