Question

我创建了一个函数，如果按钮为空，则禁用按钮但是如果输入只有空格我想禁用它。下面是我的代码，但我无法理解如何将其添加到我的jquery代码中。

HTML

<input type="text" maxlength="200" style="margin-left: 0;" name="Name" id="Name" value="" />
<button type="add" name="btnadd" class="actionButton" disabled="disabled">
            <span>Add Name</span></button>

JS脚本

var validateName = function() {

         if ($('#Name').val() == '' || !$('#Name').val().trim().length){

            $('button.actionButton').prop('disabled', true);
          }
          else {
            $('button.actionButton').prop('disabled', false);
          }

    };

        $('#Name').keyup(function(e) {

            validateName();
        });

  $(document).ready(function(){

        validateName();
  });

Answer 1

使用 .attr（）

尝试类似的内容

$(document).ready(function() {
  $('input[type="submit"]').attr('disabled', true); // initially button is disabled
  $('#Name').on('keyup', function() {
    var text_value = $("#Name").val();
    if (!text_value.trim().length) {
      $('input[type="submit"]').attr('disabled', true);
    } else {
      $('input[type="submit"]').attr('disabled', false);
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Name" type="text" name="name" />
<input type="submit" value="Next" />

其他明智的尝试使用 .prop（）

$(document).ready(function() {
  $('#Name').on('keyup', function() {
    var text_value = $("#Name").val();
    if (!text_value.trim().length) {
      $('button.actionButton').prop('disabled', true);
    } else {
      $('button.actionButton').prop('disabled', false);
    }
  });

});

.actionButton {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Name" type="text" name="name" />
<button class="actionButton" disabled>Next</button>

Answer 2

对值使用trim来删除所有尾随空格。这样你就可以随时检查它是否为空。

If (!$("#Name").val().trim().length) {
  // disable button
}

Trim删除字符串开头或结尾的所有空格。所以你只需要检查修剪后的值是否有任何长度，它应该只处理空值和空值。

更新

如果您想在输入字符串开头的任何时候禁用该按钮，那么您需要一个正则表达式。

var val = $('#Name').val()

// this condition checks if there's whitespace at the beginning
// or if the string is empty
// if either is true we disable the button
if (/^\s/.test(val) || !val.trim().length) {
  // disable the button
}

有了这个新条件，您就不需要检查val === ''。该问题由!val.trim().length处理。

Answer 3

一个简短的正则表达式可以测试输入字符串是否包含空白以外的任何内容。

if (/[^\s]/.test($('#Name').val()))
    $('button.actionButton').prop('disabled', false);
else
    $('button.actionButton').prop('disabled', true);

或者单行表达式......

$('button.actionButton').prop('disabled', !(/[^\s]/.test($('#Name').val())));

如果输入空格，则使用道具禁用按钮输入框

3 个答案:

更新