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.
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.
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 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>| Arquivo JS | Popper | Zxcvbn |
|---|---|---|
| checkforce.bundle.js checkforce.bundle.min.js |
Incluído | Incluído |
| checkforce.js checkforce.min.js |
-- | -- |
npm install checkforce.js --save<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.
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>
Para deixar a caixa na posição lateral esquerdo: left.
...
<script>
const checkForce = new CheckForce('#input-password', {
placement: 'left'
});
</script>
Para deixar a caixa na posição lateral direito: right.
...
<script>
const checkForce = new CheckForce('#input-password', {
placement: 'right'
});
</script>
Para deixar a caixa no modo responsivo. Ou seja para ela ajustar-se de acordo com o tamanho da tela, você pode usar o valor: auto.
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/
MIT