Javascript Word和characterCount验证

Question

我有一个文本区$.questionField，其中用户需要输入至少5个单词和20个字符。当达到此最小值时，提交按钮将变为活动状态。这是可行的。

还有一个word $.wordCounter和character $.characterCounter计数器，向用户显示剩余的单词/字符。这只起到了部分作用：

当达到阈值时，只有第一个字/character计数器的颜色变为绿色。我假设下面的if代码结构需要修改/扩充以适应这两种情况(如果首先达到了单词或字符的限制)。

有没有更好的方法来用javascript (或下划线)来实现这一点？

$.questionField.addEventListener("change", function(e){
    var words = $.questionField.value.split(" ").length;
    var characters = $.questionField.value.replace(/[^A-Z]/gi, "").length;
    console.log("characters " + characters);
    if (words > 5 && characters > 20) {
        if (OS_IOS) {
            $.submitIconSubmitPage.touchEnabled = true;
            $.submitIconSubmitPage.color = "green";
        }
    } else if (words <= 5 || characters <= 20){
                if (words <=5) {
                    $.wordCounter.color = "red";
                    $.wordCounter.text = 5 - words;
                } else {
                    $.wordCounter.color = "green";
                }
                if (characters <=20) {
                    $.characterCounter.color = "red";
                    $.characterCounter.text = 20 - characters;
                } else {
                    $.characterCounter.color = "green";
                }

            if (OS_IOS) {
                $.submitIconSubmitPage.touchEnabled = false;
                $.submitIconSubmitPage.color = "red";
            }
        }
});

Answer 1

你的代码似乎是根据大写字母或字数进行验证，并根据长度设置字符的颜色？

如果使用jQuery，我会做类似this的事情。但是如果你不使用jQuery，它可能不能满足你的需求。

$('#myInput').on('keyup', function(event){
    var val = $('#myInput').val().trim(),
        numWords = val.split(' ').length,
        numCharacter = val.replace(/\s/g, '').length;

    $('.characterCounter').text(20-numCharacter + ' characters remaining.');
    $('.wordCounter').text(5 - numWords + ' words remaining.');

    if(numWords >= 5 || numCharacter >= 20){
        $('#myInput').addClass('valid');
        $('#mySubmit').addClass('valid');
        $('.remaining').hide();
    } else {
        $('.remaining').show();
        $('#myInput').removeClass('valid');
        $('#mySubmit').removeClass('valid');
    }
});

Answer 2

可以对其进行适当的整理，但本质上您需要的内容如下：

question.on('keyup', function(){
    var words = question.val().split(/\s*/).length;
    var characters = question.val().toLowerCase().replace(/[^\w]/g, '').length;

    wordCount.text(words);
    characterCount.text(characters);

    wordCount.toggleClass('red', words < 5);
    characterCount.toggleClass('red', characters < 20);

    if(words >= 5 && characters >= 20) {
        submit.removeAttr('disabled');
    } else {
        submit.attr('disabled', 'disabled');
    }
});

这是一个实际演示它的JSfiddle。不过，您需要在OS_IOS工作中添加https://jsfiddle.net/mwta17ph/。