Question

我的HTML中有一个字段，我想根据某些验证规则检查其大小和值。这是jQuery代码：

$(function(){
    $('#id_title').keyup(function() {
        data = $(this).val();    
        if (data == "    ") {
            $('#output').text("The title can not be spaces");
            $('#SubmitAction').attr("disabled", true);
        } else {
            if (data.length < 5) {
                $('#output').text("The title can not be shorter than 5 characters");
                $('#SubmitAction').attr("disabled", true);   
            } else {
                if (data.length > 30) {
                    $('#output').text("The title can not exceed 30 characters");
                    $('#SubmitAction').attr("disabled", true);
                }
            }
        }
        data = $(this).val();
    });
});

问题是，当它进入任何if块时，即使用户正确完成了信息，它仍会卡住。

Answer 1

disabled是一个属性，对于修改属性，您应使用prop方法而不是attr。您可以使用jQuery $.trim实用程序函数来检查值的长度，而不是使用空字符。

$('#id_title').keyup(function() {
    var val = $.trim(this.value), 
        error = '';

    if ( val.length === 0 ) {
       error = "The title can not be empty");
    } else if ( val.length < 5 || val.length > 30 ) {
       error = "The title can not be shorter than 5 characters and exceed 30 characters";
    }

    $('#output').text(error);
    $('#SubmitAction').prop("disabled", error.length);
});

请注意，验证keyup上的文本输入不是用户友好的，用户输入一个字符，并在第一个keyup事件中显示错误。我建议改为使用blur事件。

Answer 2

在为任何if函数

禁用后，需要再次启用输入字段

$(function(){
      $('#id_title').keyup(function(){
        var data = $(this).val();    
        if( data == "    "){
        $('#output').text("The title can not be spaces");
        $('#SubmitAction').attr("disabled", true);
        }
        else {
          if(data.length < 5){
          $('#output').text("The title can not be shorter than 5 characters");
          $('#SubmitAction').attr("disabled", true);   
          }
            else{
              if(data.length > 30){
              $('#output').text("The title can not exceed 30 characters");
              $('#SubmitAction').attr("disabled", true);
              } else $('#SubmitAction').attr("disabled", false);
            }


        }
        data = $(this).val();

    });
      });

Answer 3

首次使用var表示您的变量，var data = $(this).val();为本地变量。然后，当用户正确完成信息时，您应该将disabled设置为false：

$(function(){
  $('#id_title').keyup(function(){
    data = $(this).val();
    if( data == "    "){
    $('#output').text("The title can not be spaces");
    $('#SubmitAction').attr("disabled", true);
    }
    else {
      if(data.length < 5){
      $('#output').text("The title can not be shorter than 5 characters");
      $('#SubmitAction').attr("disabled", true);   
      }
        else{
          if(data.length > 30){
          $('#output').text("The title can not exceed 30 characters");
          $('#SubmitAction').attr("disabled", true);
          }else{
               $('#SubmitAction').attr("disabled", false);
          }
        }


    }
    data = $(this).val();

});
  });

textarea中的JQuery keyup函数

3 个答案: