2017-08-27 1 views
1

Ich hatte ein Grundwissen über jQuery. Ich arbeite derzeit an der jQuery-Formularvalidierung mit Passwortstärkeprüfung. Ich hatte den Teil zur Prüfung der Passwortstärke abgeschlossen, aber ich weiß nicht, wie ich die Übermittlungsschaltfläche aktivieren kann, nachdem die Bedingung erfüllt wurde.jQuery Formvalidierung mit Passwortstärkeprüfung

Here is my code:https://codepen.io/jagan/pen/rzZqMq

+0

Kurz vor 'return 'Strong';', sollten Sie '$ (" # sign-up ") haben. RemoveAttr ('deaktiviert')'. Das sollte den Trick machen. –

Antwort

3

Sie deaktivieren aktivieren für die Schaltfläche in der Statusleiste je nutzen können, einfach schnell zum Problem lösen, aber ich glaube, wenn Sie es allgemeinere und solide machen möchten, können Sie auf Flag ab, die falsch gesetzt wenn die Validierung verschmutzt oder schalten Sie ihn auf true nur, wenn die Validierung Verhalten, wie Sie wollen

$(document).ready(function(){ 
    $('#password').keyup(function(){ 
     var valid = true; 
     $('#result').html(checkStrength($('#password').val())); 
       //Calculated strength value, we can return messages 
     if(!valid){ 
      alert('errorMessage'); 
      } 

    }); 


    function checkStrength(password){ 
     var strength = 0; 


     //If password contains both lower and uppercase characters, increase strength value. 
     if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { 
      strength += 1 ; 
      $('.low-upper-case').addClass('text-success'); 

     } 
     else{ 
      $('.low-upper-case').removeClass('text-success'); 
      valid = false; 
     } 

     //If it has numbers and characters, increase strength value. 
     if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){ 
      strength += 1; 
      $('.one-number').addClass('text-success'); 

     } 
     else{ 
      $('.one-number').removeClass('text-success'); 
      valid = false; 
     } 

     //If it has one special character, increase strength value. 
     if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) { 
      strength += 1; 
      $('.one-special-char').addClass('text-success'); 

     } 
     else{ 
      $('.one-special-char').removeClass('text-success'); 
      valid = false; 
     } 

     if (password.length > 7){ 
     strength += 1; 
     $('.eight-character').addClass('text-success'); 

     } 
     else{ 
      $('.eight-character').removeClass('text-success'); 
      valid = false; 
     } 




     // If value is less than 2 

     if (strength < 2) 
     { 
      $('#result').removeClass() 
      $('#password-strength').addClass('progress-bar-danger'); 
      $('#result').addClass('text-danger') 
      $('#password-strength').css('width', '10%'); 
      $("#sign-up").attr("disabled",true) 
      return 'Very Weak'   
     } 
     else if (strength == 2) 
     { 
      $('#result').removeClass() 
      $('#result').addClass('good'); 
      $('#password-strength').removeClass('progress-bar-danger'); 
      $('#password-strength').addClass('progress-bar-warning'); 
      $('#result').addClass('text-warning') 
      $('#password-strength').css('width', '60%'); 
      $("#sign-up").attr("disabled",true) 
      return 'Week'  
     } 
     else if (strength == 4) 
     { 
      $('#result').removeClass() 
      $('#result').addClass('strong'); 
      $('#password-strength').removeClass('progress-bar-warning'); 
      $('#password-strength').addClass('progress-bar-success'); 
      $('#result').addClass('text-success'); 
      $('#password-strength').css('width', '100%'); 
      $("#sign-up").attr("disabled",false) 
      return 'Strong' 
     } 

    } 

     // if (passwordStatus == true){ 
     // $('#sign-up').prop("disabled", false); 
     // } 
}); 
0

den Code unten Überprüfen Sie verwendet globale JavaScript-Variable um das Passwort zu bestätigen, die mit falsch initialisiert wurde.

function checkStrength(password){ 
     var valid = true; 
     var strength = 0; 


     //If password contains both lower and uppercase characters, increase strength value. 
     if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { 
      strength += 1 ; 
      $('.low-upper-case').addClass('text-success'); 

     } 
     else{ 
      $('.low-upper-case').removeClass('text-success'); 
      valid = false; 
     } 

     //If it has numbers and characters, increase strength value. 
     if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){ 
      strength += 1; 
      $('.one-number').addClass('text-success'); 

     } 
     else{ 
      $('.one-number').removeClass('text-success'); 
      valid = false; 
     } 

     //If it has one special character, increase strength value. 
     if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) { 
      strength += 1; 
      $('.one-special-char').addClass('text-success'); 

     } 
     else{ 
      $('.one-special-char').removeClass('text-success'); 
      valid = false; 
     } 

     if (password.length > 7){ 
     strength += 1; 
     $('.eight-character').addClass('text-success'); 

     } 
     else{ 
      $('.eight-character').removeClass('text-success'); 
      valid = false; 
     } 
     if (valid){ 
     $('#sign-up').prop("disabled", false); 
     } 



    }