Question

<!--language:lang-html-->
<div class="form-group m-b-40 ">
    <input type="text" class="form-control" id="input1">
    <span class="bar"></span>
    <span class="error_form" id="bname_error_message"></span>
    <label for="input1">Regular Input</label>
</div>

在上面的html中，我需要将"form-control-success"类添加到input元素中，并使其保持正确，只要它符合状态if (pattern.test(bname) && bname !== '')

同样的逻辑也应该应用于输入的父元素。但是这次应该将不同的类"has-success"添加到父类中，并保持它直到满足相同条件。

对于其他情况，例如else if(bname !== '')和(!pattern.test(bname))，分别添加到输入及其父类的类"form-control-success"和"has-success"应该用它们相反的类{{ 1}}和"form-control-warning"。此过程绑定到“ keyup”事件。我想知道是否有一种方法或一种优雅的方法可以减少代码行并保持简单。

笨拙的代码看起来像这样：

"has-warning"

Answer 1

我认为它相当不错，但我建议您做一些小改动：

将您的else逻辑分组在同一块中，因为它们重复了，除了用于设置html文本的行。
使用.parent（）代替.parents（“。form-group”）获取输入直接父级。

所以它看起来像这样：

$("#input1").keyup(function(){
    check_bname();
});

function check_bname() {
    var pattern = /^[a-zA-Z]$/;
    var bname = $("#input1").val();

    if (pattern.test(bname) && bname !== '') {
        $("#bname_error_message").hide();
        $("#input1").removeClass("form-control-warning");
        $("#input1").parent().removeClass("has-warning");
        $("#input1").parent().addClass("has-success");
        $("#input1").addClass("form-control-success"); 
    } else {
        $("#bname_error_message").html(bname === ''? "Should not be empty" : "Should contain only Characters");
        $("#input1").removeClass("form-control-success");
        $("#input1").parent().removeClass("has-success");
        $("#input1").addClass("form-control-warning");
        $("#input1").parent().addClass("has-warning");
    }
}

Answer 2

这是您的代码版本，其简洁性更高，并且使用了更简洁的编码（重复次数更少），但是我无法尝试使用该代码，因此它可能包含一个或两个错误，您需要在之前进行尝试你跑了，但我希望你有个大概的想法：

<!--language:lang-jquery-->
$elemInput.keyup(function(){
  check_bname();
});

function check_bname() {
  var pattern = /^[a-zA-Z]*$/,
  bname = $elemInput.val(),
  $elemInput = $("#input1"),
  $elemError = $("#bname_error_message"),
  patternMatch = pattern.test(bname) && bname !== '';

  $elemError[patternMatch ? 'hide' : 'show']();
  $elemError.removeClass(patternMatch ? "form-control-warning" : "form-control-success")
  $elemInput.parents(".form-group").removeClass(patternMatch ? "has-warning" : "has-success") 
  $elemInput.addClass(patternMatch ? "form-control-success" : "form-control-warning"); 
  $elemInput.parents(".form-group").addClass(patternMatch ? "has-success" : "has-warning")
  
  if (!patternMatch) {
    $elemError.html(bname === '' ? "Should not be empty" : "Should contain only Characters");
  }
}

Answer 3

$('#input1').on('keyup', function(event) {
    check_bname(event.target.value);
});

function check_bname(bname) {
    var $bnameInput = $("#input1");
    var $bnameErrorMessage = $("#bname_error_message");

    var pattern = /^[a-zA-Z]*$/;

    if(bname && pattern.test(bname)) {
        $("#bname_error_message").hide();

        $bnameInput.removeClass("form-control-warning");
        $bnameInput.parents(".form-group").removeClass("has-warning");

        $bnameInput.addClass("form-control-success");
        $bnameInput.parents(".form-group").addClass("has-success");         
    }
    else {
        $bnameInput.removeClass("form-control-success"); 
        $bnameInput.parents(".form-group").removeClass("has-success");

        $bnameInput.addClass("form-control-warning");   
        $bnameInput.parents(".form-group").addClass("has-warning");

        if (!bname) {
            $bnameErrorMessage.text("Should not be empty");
        }
        else {
            $bnameErrorMessage.text("Should contain only Characters");
        }

        $bnameErrorMessage.show();     
    }
}

使元素在两个其他类之间切换的简单而优雅的方法

3 个答案: