更改JavaScript中的颜色文本

Question

I'm new in javascript and I want to change color for different classes in this code below. I want for example class 'ok' color green, class 'error' color red.

$('#pass').keyup(function (e) {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    if (false == enoughRegex.test($(this).val())) {
        $('#passstrength').html('Minimum 6 znaków');
    } else if (strongRegex.test($(this).val())) {
        $('#passstrength').className = 'ok';
        $('#passstrength').html('Silne!');
    } else if (mediumRegex.test($(this).val())) {
        $('#passstrength').className = 'alert';
        $('#passstrength').html('Średnie!');
    } else {
        $('#passstrength').className = 'error';
        $('#passstrength').html('Słabe!');

    }
    return true;
});

Answer 1

You need to use proper jquery function to add the desired class .

$('#pass').keyup(function (e) {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    if (false == enoughRegex.test($(this).val())) {
        $('#passstrength').html('Minimum 6 znaków');
    } else if (strongRegex.test($(this).val())) {
        $('#passstrength').addClass('ok');
        $('#passstrength').removeClass('alert');
        $('#passstrength').removeClass('error');
        $('#passstrength').html('Silne!');
    } else if (mediumRegex.test($(this).val())) {
        $('#passstrength').addClass('alert');
        $('#passstrength').removeClass('ok');
        $('#passstrength').removeClass('error');
        $('#passstrength').html('Średnie!');
    } else {
        $('#passstrength').addClass('error');
        $('#passstrength').removeClass('ok');
        $('#passstrength').removeClass('alert');
        $('#passstrength').html('Słabe!');

    }
    return true;
});

The addClass adds the specified class(es) to each element in the set of matched elements. So use that to achieve what you want.

Answer 2

The issue is with this $('#passstrength').className

className is native javascript method to set or return the class

where as $('#passstrength') is a jquery object, className will not work with this jquery object

But it will work with document.getElementById('passstrength').className='yourClassName'

and with jquery addClass & removeClass will work