"Password, config password, sifre kontrol"
Bootstrap 4.1.1 Snippet by sefay

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class=row> <strong>Şifre Kontrol (Password Control)</strong> </div> <div class="row"> <ul class="form-list"> <li> <label for="pass">Şifre(password) <span class="required">*</span></label> <br> <input type="password" title="Password" id="pass" class="input-text required-entry validate-password form-control" runat="server" required="required" autofocus="autofocus" name="password"> </li> <li> <label for="passtek">Şifre Tekrar (confirm password) <span class="required">*</span></label> <br> <input type="password" title="Şifre Tekrar" id="passtek" class="input-text required-entry validate-password form-control" runat="server" required="required" autofocus="autofocus" name="confirm_password"> </li> <li> <span id="guclu_mu"></span> </li> <li> <span class="hide ayni" id="d1">İki parolada aynı(Same in two passwords.).</span> <span class="hide degil" id="d2">Parola doğrulama alanı parola alanıyla aynı olmak zorunda(The password verification field has to be the same as the password field).</span> </li> </ul> </div> <div class="row"> <a class="btn glyphicon glyphicon-thumbs-up btn-primary" href="http://www.escmedya.net/"><span class="glyphicon btn-glyphicon glyphicon-thumbs-up img-circle text-primary"></span>Sefa Yalçınkaya</a> </div> </div>
.form-list { padding: 0; list-style: none; } .form-list label { position: relative; z-index: 0; font-weight: normal; display: inline; margin: 0px; } .form-list input.input-text { background: #fff; border: 1px solid #ddd; padding: 7px 10px; width: 100%; margin-top: 5px; outline: none; color: #aaa; } .required { color: #F00; } .hide{ display:none; } .ayni{ color:#FFF; background:green; } .degil{ color:#FFF; background:#FF0000; } .form-list li{ margin-top:15px; } .kullanmadahaiyi,.idareeder,.tamamdir,.azkarakter{ display:inline-block; border:1px solid #000; min-width:120px; min-height:20px; line-height:20px; font-size:13px; font-weight:bold; padding-left:5px; } .kullanmadahaiyi{ color:#FFF; background:#FF0000; } .tamamdir{ color:#FFF; background:green; } .idareeder{ background: yellow; } .azkarakter{ color:#FFF; background:#000; } /*button*/ .btn-glyphicon { padding:8px; background:#ffffff; margin-right:4px; } .icon-btn { padding: 1px 15px 3px 2px; border-radius:50px;}
$(function () { $('#passtek').on('keyup', function () { var pwd = $('#pass').val(); var confirm_pwd = $(this).val(); $('#d1').hide(); $('#d2').hide(); if (pwd == confirm_pwd) { $('#d1').show(); } else { $('#d2').show(); } }); }); jQuery(document).ready(function($) { $('#pass').keyup(function(e) { //Karakter Sayısı Tanımlamaları var guclukarakter = 8; //Güçlü saymak için gerekli sayı var ortakarakter = 7; //Orta güçlü saymak için gerekli sayı var gecerkarakter = 6; //En az gereki sayı //Regex ile kontrol fonksiyonları var strongRegex = new RegExp("^(?=.{"+guclukarakter+",})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{"+ortakarakter+",})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); var enoughRegex = new RegExp("(?=.{"+gecerkarakter+",}).*", "g"); //Test başlasın... :) if (false == enoughRegex.test($(this).val())) { $('#guclu_mu').removeClass(); $('#guclu_mu').addClass('azkarakter'); $('#guclu_mu').html('En az(At least) '+gecerkarakter+' karakter (characters)!'); } else if (strongRegex.test($(this).val())) { $('#guclu_mu').removeClass(); $('#guclu_mu').addClass('tamamdir'); $('#guclu_mu').html('Güçlü(Strong)!'); } else if (mediumRegex.test($(this).val())) { $('#guclu_mu').removeClass(); $('#guclu_mu').addClass('idareeder'); $('#guclu_mu').html('Orta(Middle)!'); } else { $('#guclu_mu').removeClass(); $('#guclu_mu').addClass('kullanmadahaiyi'); $('#guclu_mu').html('Güçsüz(powerless)!'); } return true; }); });

Related: See More


Questions / Comments: