JavaScript Funktion: Sicheres Passwort prüfen

Clear
beispiel.html
 

<html>
<head>
<title>Sichere Passwort</title>
<style>
#colbox{
 width:40px;
 height:40px;
 background-color: transparent;
 border:1px solid transparent;
}

.input-text {
  display: block;
  margin: 0;
  padding: 0 10px;
  color: inherit;
  width: 100%;
  font-family: inherit;
  font-size: var(--inputFontSize);
  font-weight: inherit;
  line-height: var(--inputLineHeight);
  border: 1px solid #FF9900;
  border-radius: 0.4rem;
  transition: box-shadow var(--transitionDuration);
  height:100%;
}
.jqbutton{
  background-color:#FFF;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border:1px solid #FA2;
  font-family:Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  color: #FA2;
  margin-top:0px;
  text-shadow:bbb 0 1px 0;
  text-align:center;
  align:center;
  cursor:pointer;
  width:100%;
  height:100%;
}
.jqbutton:hover{
  color: #FB9C07;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 3px rgba(192,0,0,1);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 3px rgba(192,0,0,1);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 3px rgba(192,0,0,1);
}
.jqbutton p {
  line-height: 0.9;
  display: inline-block;
  vertical-align: middle;
}
.ktxt{
 padding: 10px 0 0 10px;
 text-align:center;
 font-family:Helvetica,arial,sans-serif;
 font-size:18px;
 font-weight:bold;
 text-decoration:none;
 color:#787CE9;
 margin-top:20px;
}
</style>
</head>
<body>
   <div class="ktxt">JavaScript Funktion: Sicheres Passwort prüfen</div>
   <table align="center" width="80%" border="0" style="margin-top:50px;">
    <tr>
     <td align="center" width="50%" height="40">
      <input type="text" name="pass" value="" id="pwinput" class="input-text" onkeyup="pwcheck_col(this)"/>
     </td>
     <td align="center" width="25%">
      <div id="colbox"></div>
     </td>
     <td align="center" width="25%">
      <div class="jqbutton" id="clitid" style="color:orangered;"><p>Clear</p></div>
     </td>
    <tr>
   </table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
/* PASSWORD COLOR BEGINN */
function pwcheck_col(pf)
{
  var x = 8;
  pw = pf.value.trim();
  if(!pw.match(/[a-z]/)||!pw.match(/[A-Z]/)){x-=2};
  if(pw.length<8)                           {x-=2};
  if(!pw.match(/[^a-z\d]/i))                {x-=2};
  if(!pw.match(/[\d]/i))                    {x-=2};

  col = 'green';
  if(x<8)col='yellow';
  if(x<4)col='red';
  document.getElementById('colbox').style.background = col;
}
/* PASSWORD COLOR ENDE */
/* CLEAR INPUT BEGINN */
$('#clitid').click(function(){
  $('#pwinput').val('');
  $('#pwinput').focus();
  $('#colbox').css('background-color', '');
});
/* CLEAR INPUT ENDE */
</script>
</html>

Beispiel Kopieren