2

我的 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 块时，即使用户正确完成了信息，它也会卡住。

4

3 回答 3

1

disabled是一个属性，要修改属性，您应该使用propmethod 而不是attr. $.trim您可以使用 jQuery实用函数并检查值的长度，而不是使用空字符。

$('#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事件。

于 2013-04-15T21:11:43.647 回答
0

在任何 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();

    });
      });
于 2013-04-15T21:07:19.290 回答
0

在第一次使用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();

});
  });
于 2013-04-15T21:08:08.010 回答