在javascript中更改颜色文本

时间:2017-12-29 13:31:29

标签: javascript colors passwords

我是javascript的新手,我想在下面的代码中更改不同类的颜色。我希望例如上课' ok'颜色绿色,类'错误'红色。

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

2 个答案:

答案 0 :(得分:0)

您需要使用正确的jquery函数来添加所需的类。

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

addClass将指定的类添加到匹配元素集中的每个元素。所以用它来达到你想要的效果。

答案 1 :(得分:0)

问题在于此$('#passstrength').className

className是用于设置或返回类

的本机javascript方法

其中$('#passstrength')是jquery对象,className将无法使用此jquery对象

但它适用于document.getElementById('passstrength').className='yourClassName'

并使用jquery addClass& removeClass将有效