带有密码强度检查的 jQuery 表单验证

Question

我对 jQuery 有基本的了解。我目前正在使用密码强度检查进行 jQuery 表单验证。我已经完成了密码强度检查部分，但我不知道在条件满足后如何启用提交按钮。

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

Answer 1

您可以根据状态栏对按钮使用禁用启用，轻松快速解决问题，但我相信如果您想让它更通用和可靠，您可以依赖在验证脏时设置为 false 的标志或切换它仅当验证行为符合您的要求时才为 true

$(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);   
        // }
});

Answer 2

检查下面的代码，您使用全局 javascript 变量来验证初始化为 false 的密码。

 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);   
        }



    }