CSS/JQueryフォームの検証

Question

パスワード入力フィールドにこの種の検証を実装する方法を教えてください。 これはモーダルで行うことができますか？助けてくれてありがとう！

enter image description here

Answer 1

これは、同様のパスワード確認ボックスが含まれています。あなたは本当にパスワードを検証するためにJavaScript内のif文を抽出することができます。 SO

$('input[type=password]').focusin(function() { 
 
    $('div.pw-validator').fadeIn(300); 
 
}); 
 

 
$('input[type=password]').focusout(function() { 
 
    $('div.pw-validator').fadeOut(300); 
 
}); 
 

 
$('input[type=password]').keyup(function() { 
 
    var pw = $(this).val(); 
 
    
 
    if (pw.length >= 8) 
 
    $('.pw-validator span.character-count').addClass('accomplished'); 
 
    else 
 
    $('.pw-validator span.character-count').removeClass('accomplished'); 
 
    
 
    var hasLowercase = false; 
 
    var hasUppercase = false; 
 
    
 
    for (var i = 0; i< pw.length; i++) { 
 
    if (pw[i] >= 'a' && pw[i] <= 'z') 
 
     hasLowercase = true; 
 
    else if (pw[i] >= 'A' && pw[i] <= 'Z') 
 
     hasUppercase = true; 
 
    } 
 
    if (hasUppercase) 
 
    $('.pw-validator span.uppercase-character').addClass('accomplished'); 
 
    else 
 
    $('.pw-validator span.uppercase-character').removeClass('accomplished'); 
 
    
 
    if (hasLowercase) 
 
    $('.pw-validator span.lowercase-character').addClass('accomplished'); 
 
    else 
 
    $('.pw-validator span.lowercase-character').removeClass('accomplished'); 
 
    
 
});

input { 
 
    display: block; 
 
    border: 1px solid #aaa; 
 
    border-radius: 3px; 
 
    padding: 5px; 
 
    margin-bottom: 20px; 
 
} 
 

 
div.pw-validator { 
 
    display: none; 
 
    width: 150px; 
 
    height: 100px; 
 
    box-shadow: 0px 0px 5px black; 
 
    position: absolute; 
 
    top: 80px; 
 
    left: 20px; 
 
} 
 
div.pw-validator span { 
 
    margin: 5px; 
 
    color: black; 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    display: block; 
 
    transition: color 0.2s ease-in-out; 
 
} 
 
div.pw-validator span.accomplished { 
 
    color: #73ac21; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" placeholder="Username" class="username"/> 
 
<input type="password" placeholder="Password" class="password"/> 
 
<div class="pw-validator"> 
 
    <span class="character-count">8 or more characters</span> 
 
    <span class="uppercase-character">1 uppercase character</span> 
 
    <span class="lowercase-character">1 lowercase character</span> 
 

 
</div>