Complexify è un plugin per jQuery, che si implementa con i campi password dei moduli form, ad esempio nei moduli di registrazione, che mira a fornire all’utente una indicazione visuale sul livello di complessità della password scelta e digitata. La complessità cresce a seconda che si inseriscano caratteri in maiuscolo e minuscolo, lettere e numeri, segni di punteggiatura e numero di caratteri inseriti.
Il tutto per aumentare la sicurezza dell’utente. Come opzioni da potere variare sul plugin troviamo il numero minimo di caratteri che una password deve avere per essere valida ed il fattore di complessità da applicare durante il calcolo. Ad esempio, impostando 0.8 si permetterebbero password meno complesse del normale. Al contrario, 1.2 richiederebbe password di complessità superiore.
Esemio di implementazione
Inserimento all’interno del tag
<HEAD>
|
1 |
<script type="text/javascript" src="/js/jquery.complexify.js"></script> |
Inizializzazione della funzione
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(function () { $("#password").complexify({}, function (valid, complexity) { if (!valid) { $('#progress').css({'width':complexity + '%'}).removeClass('progressbarValid').addClass('progressbarInvalid'); } else { $('#progress').css({'width':complexity + '%'}).removeClass('progressbarInvalid').addClass('progressbarValid'); } $('#complexity').html(Math.round(complexity) + '%'); }); }); </script> |
Codice CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
#demo { width:380px; margin-right:auto; margin-left:auto; } #progressbar { width:388px; height:48px; display:block; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; border-top-right-radius: 8px; border-top-left-radius: 8px; overflow:hidden; } #progress { display:block; height:100px; width:0%; } .progressbarValid { background-color:green; background-image: -o-linear-gradient(-90deg, #8AD702 0%, #389100 100%); background-image: -moz-linear-gradient(-90deg, #8AD702 0%, #389100 100%); background-image: -webkit-linear-gradient(-90deg, #8AD702 0%, #389100 100%); background-image: -ms-linear-gradient(-90deg, #8AD702 0%, #389100 100%); background-image: linear-gradient(-90deg, #8AD702 0%, #389100 100%); } .progressbarInvalid { background-color:red; background-image: -o-linear-gradient(-90deg, #F94046 0%, #92080B 100%); background-image: -moz-linear-gradient(-90deg, #F94046 0%, #92080B 100%); background-image: -webkit-linear-gradient(-90deg, #F94046 0%, #92080B 100%); background-image: -ms-linear-gradient(-90deg, #F94046 0%, #92080B 100%); background-image: linear-gradient(-90deg, #F94046 0%, #92080B 100%); } #status { height:150px; width:388px; border:1px solid #ccc; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } #password { width:100%; height:40px; font-size:30px; line-height:40px; border-radius: 8px; } #complexityLabel { width:100%; text-align:center; margin-top:10px; font-size:20px; line-height:30px; } #complexity { width:100%; text-align:center; font-family:"Helvetica Neue", "Helvetica", Arial, sans-serif; font-weight:bold; font-size:70px; line-height:80px; margin-top:10px; } |
Codice HTML
|
1 2 3 4 5 6 7 8 9 |
<div id="demo"> <input type="password" id="password" placeholder="Password"> <div id="progressbar"><div id="progress"></div></div> <div id="status"> <div id="complexity">0%</div> <div id="complexityLabel">Complexity</div> </div> </div> |
Demo Download Info | Sito Web | Autore
| Articolo pubblicato 5 anni fa nella categoria 
